Question

У меня есть любопытный случай, что я не могу понять ...

У меня есть директивы на мое приложение следующим образом:

app.directive('cartTotal', function() { 
    return { 
    template: "<i ui-sref='cart' class='fa fa-shopping-basket'></i><span class='items'>@{{cartQTotal.total}}</span>" 
    }; 
}); 

Когда я загружаю страницу, срабатывает эта функция:

if(localStorage.getItem("cart") != null) 
    { 
     console.log("makeacart"); 
     var cart = JSON.parse(localStorage.getItem("cart")); 
     $scope.cartQTotal.total = 0; 
     for(i=0;i<cart.length;i++) 
     { 
      $scope.cartQTotal.total += cart[i].cartQ; 
     } 
     $('.fixed-cart').animateCss('bounce'); 
    } 

Это работает.

Но если я изменяю $ scope.cartQTotal за пределами этого, например, в функции (еще в родительском контроллере, но полученный из ng-click()), например:

$scope.add2Cart = function(name){ 
var cart = JSON.parse(localStorage.getItem("cart")); 
     for(var zz = 0;zz<cart.length;zz++) 
    { 
     if(cart[zz].item == name) 
     { 
      console.log("already in cart"); 
      $('.fixed-cart').animateCss('bounce'); 
      return; 
     } 
    } 
     cart.push({item:name,cartQ:1}); 
     localStorage.setItem("cart", JSON.stringify(cart)); 
     console.log("makeacartii"); 
     $scope.cartQTotal.total = 0; 
     for(i=0;i<cart.length;i++) 
     { 
      $scope.cartQTotal.total += cart[i].cartQ; 
     } 
     console.log($scope.cartQTotal.total);//THE NUMBER I WANT 
     $('.fixed-cart').animateCss('bounce'); 
} 

На //The Number I Want линии я получаю правильный число, так как в переменной правильно, но мой шаблон директивы не обновляется. Я не понимаю, почему нет.

Пожалуйста, помогите.

Редактировать (из документации):

Соблюдения директивы, такие как двойные фигурные выражения выражения {{}}, регистра слушателей с использованием метода $ часов(). Этот тип директивы должен быть уведомлен всякий раз, когда выражение изменяется, чтобы оно могло обновить представление.

Так что, я думаю, вопрос в том, как правильно сообщить директиву?

EDIT 2:

Глядя на него, используя расширение nginspector, оказывается, у меня есть две области с cartQTotal, а не один, это остается постоянной или нет я директиву.

Я очень смущен, потому что у меня есть область моего контроллера, а затем дублирующаяся область со всеми теми же переменными, но cartQTotal изменяется в одной области, а не в другом. Почему у меня есть дублируемая, но неназванная область управления?

Answer 1

Это была проблема, как выяснены здесь: How do I share $scope data between states in angularjs ui-router?

В принципе я не понял, что моя конфигурация ui-router было создание отдельный экземпляр моего контроллера. Изменение моего кода, как указано в этом ответе, позволило ему работать правильно, даже несмотря на то, что я не менял состояния, это все равно повлияло на способность директивы связываться с соответствующим экземпляром контроллера.

Answer 2

Данные, которые вы хотите использовать в своей директиве, которые управляются вне директивы, должны передаваться с использованием привязок. Там есть отличный короткий текст here, который показывает вам, как это сделать. Лично я больше всего использую метод 6.

Суть - вы добавить возвращаемый объект вашей директивы:

scope: { 
     yourVariable: '=', //use =? for optional variables 
    } 

И затем использовать его в своей директиве, как например:

<span>{{your-variable}}</span> 

и привязаться к нему, как, например:

<my-directive your-variable="myControllerVariable"></my-directive> 

Answer 3

Это потому, что ваша директива и $scope и контроллер, где данные являются upda ting оба разные.

Поэтому вам необходимо передать данные вашего контроллера в свою директиву, чтобы он изменился.Для этого вы можете использовать $broadcast (но убедитесь, что вы знаете об этом, потому что в большом приложении его не очень хорошая практика для его использования).

Так Попробуйте контроллер

cart.push({item:name,cartQ:1}); 
     localStorage.setItem("cart", JSON.stringify(cart)); 
     console.log("makeacartii"); 
     $scope.cartQTotal.total = 0; 
     for(i=0;i<cart.length;i++) 
     { 
      $scope.cartQTotal.total += cart[i].cartQ; 
     } 
     console.log($scope.cartQTotal.total);//THE NUMBER I WANT 
     $('.fixed-cart').animateCss('bounce'); 

     $rootScope.$broadcast("cartUpdated",$scope.cartQTotal); 

директива

$scope.$on('eventEmitedName', function(event, data) { 
    $scope.cartQTotal = data; 
    });