SORU
20 ŞUBAT 2013, ÇARŞAMBA


AngularJS içinde kumanda sistemi yeniden olmadan bir yolunu değiştirebilir misin?

Daha önce sorulmuş ve cevapları iyi görünmüyor. Göz bu örnek kod ile sormak istiyorum...

Benim app sağladığı hizmet geçerli öğeyi yükler. Maddenin yeniden olmadan madde verileri manipüle eden birkaç denetleyicileri var.

Benim denetleyicileri Eğer Henüz yoksa öğeyi yeniden olacak, aksi takdirde, denetleyicileri arasında hizmetten şu anda yüklü kalemi kullanın.

Sorun: Item.html yeniden olmadan her denetleyici için farklı yolları kullanmak istiyorum.

1) Bu mümkün mü?

2) Eğer bu mümkün Değilse, oraya kadar geldim denetleyici başına bir yol vs olması için daha iyi bir yaklaşım nedir?

app.js

var app = angular.module('myModule', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/items', {templateUrl: 'partials/items.html',   controller: ItemsCtrl}).
      when('/items/:itemId/foo', {templateUrl: 'partials/item.html', controller: ItemFooCtrl}).
      when('/items/:itemId/bar', {templateUrl: 'partials/item.html', controller: ItemBarCtrl}).
      otherwise({redirectTo: '/items'});
    }]);

Item.html

<!-- Menu -->
<a id="fooTab" my-active-directive="view.name" href="#/item/{{item.id}}/foo">Foo</a>
<a id="barTab" my-active-directive="view.name" href="#/item/{{item.id}}/bar">Bar</a>
<!-- Content -->
<div class="content" ng-include="" src="view.template"></div>

controller.js

// Helper function to load $scope.item if refresh or directly linked
function itemCtrlInit($scope, $routeParams, MyService) {
  $scope.item = MyService.currentItem;
  if (!$scope.item) {
    MyService.currentItem = MyService.get({itemId: $routeParams.itemId});
    $scope.item = MyService.currentItem;
  }
}
function itemFooCtrl($scope, $routeParams, MyService) {
  $scope.view = {name: 'foo', template: 'partials/itemFoo.html'};
  itemCtrlInit($scope, $routeParams, MyService);
}
function itemBarCtrl($scope, $routeParams, MyService) {
  $scope.view = {name: 'bar', template: 'partials/itemBar.html'};
  itemCtrlInit($scope, $routeParams, MyService);
}

Çözünürlük.

Durumu: Kabul cevabı tavsiye olarak arama sorgusu kullanarak beni ana denetleyicisi yeniden olmadan farklı bir URL sağlamak için izin verdi.

app.js

var app = angular.module('myModule', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/items', {templateUrl: 'partials/items.html',   controller: ItemsCtrl}).
      when('/item/:itemId/', {templateUrl: 'partials/item.html', controller: ItemCtrl, reloadOnSearch: false}).
      otherwise({redirectTo: '/items'});
    }]);

Item.html

<!-- Menu -->
<dd id="fooTab" item-tab="view.name" ng-click="view = views.foo;"><a href="#/item/{{item.id}}/?view=foo">Foo</a></dd>
<dd id="barTab" item-tab="view.name" ng-click="view = views.bar;"><a href="#/item/{{item.id}}/?view=foo">Bar</a></dd>

<!-- Content -->
<div class="content" ng-include="" src="view.template"></div>

controller.js

function ItemCtrl($scope, $routeParams, Appts) {
  $scope.views = {
    foo: {name: 'foo', template: 'partials/itemFoo.html'},
    bar: {name: 'bar', template: 'partials/itemBar.html'},
  }
  $scope.view = $scope.views[$routeParams.view];
}

directives.js

app.directive('itemTab', function(){
  return function(scope, elem, attrs) {
    scope.$watch(attrs.itemTab, function(val) {
      if (val 'Tab' == attrs.id) {
        elem.addClass('active');
      } else {
        elem.removeClass('active');
      }
    });
  }
});

Benim giriş içindekiler ng-controller=... ile sarılır

CEVAP
20 ŞUBAT 2013, ÇARŞAMBA


Yoksa kullanmak için URL gibi #/item/{{item.id}}/foo #/item/{{item.id}}/bar #/item/{{item.id}}/?foo #/item/{{item.id}}/?bar yerine, ayarlayabilirsiniz rotanızı için /item/{{item.id}}/ gerek reloadOnSearch false (docs.angularjs.org/api/ngRoute.$routeProvider). Bu AngularJS eğer url arama kısmı değişirse, görünümü yeniden söyler.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • BurnedInDotCom

    BurnedInDotC

    3 NİSAN 2010
  • emimusic

    emimusic

    10 Mart 2006
  • pucksz

    pucksz

    24 Mart 2006