Использование метода $ watch в AngularJS

Я следую книге Адама Фримана «Pro AngularJS». Но я застрял в листинге 15-10. Код, который он предоставил, не работает вообще.

Демо-код приведен ниже. Он должен работать следующим образом: когда мы нажимаем кнопку, чтобы изменить цены, этот список должен обновляться автоматически. Не могли бы вы сообщить мне, как исправить его код? Я гугл много, но ....

<!doctype html> 
<html ng-app="exampleApp"> 
<head> 
    <script src="angular.js"></script> 
    <link rel="stylesheet" href="bootstrap.css"/> 
    <link rel="stylesheet" href="bootstrap-theme.css"/> 
    <script> 
     angular.module("exampleApp", []) 
       .controller('defaultCtrl', function ($scope) { 
        $scope.products = [ 
         {name: "Apples", category: "Fruit", price: 1.20, expiry: 10}, 
         {name: "Bananas", category: "Fruit", price: 2.42, expiry: 7}, 
         {name: "Pears", category: "Fruit", price: 2.02, expiry: 6} 
        ]; 
        $scope.incrementPrices = function(){ 
         for(var i=0; i< $scope.products.length; i++){ 
          $scope.products[i].price += 1; 
         } 
        } 
       }) 
       .directive("unorderedList", function() { 
        return function (scope, element, attrs) { 
         var data = scope[attrs["unorderedList"]]; 
         var propertyExpression = attrs["listProperty"]; 

         if (angular.isArray(data)) { 
          var listElem = angular.element("<ul>"); 
          element.append(listElem); 
          for (var i = 0; i < data.length; i++) { 
           var itemElement = angular.element('<li>'); 
           listElem.append(itemElement); 
           var watcherFn = function (watchScope) { 
            return watchScope.$eval(propertyExpression, data[i]); 
           } 
           scope.$watch(watcherFn, function (newValue, oldValue) { 
            itemElement.text(newValue); 
           }); 
          } 
         } 
        } 
       }) 

    </script> 
</head> 
<body ng-controller="defaultCtrl"> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h3>Products</h3> 
    </div> 
    <div class="panel-body"> 
     <button class="btn btn-primary" ng-click="incrementPrices()">Change prices</button> 
    </div> 
    <div class="panel-body"> 
     <div unordered-list="products" list-property="price | currency"></div> 
    </div> 
</div> 
</body> 
</html>

источник

2014-12-12 anhldbk

появляются ли какие-либо ошибки на консоли? Функция watcherFN, по-видимому, ожидает область действия в качестве параметра ввода, но в вашем определении $ watch это не предоставляется - я ожидаю, что ошибка в строке «не может вызывать $ eval неопределенного». – doldt

Нет никакой ошибки, ее особенность книги, см. Мой ответ, который исходит от 15-11. –

Просто продолжайте читать, в следующем захвате 15-11 они скажут предыдущий код не работает.

If you load the directives.html file into the browser, the directive won’t keep the li elements up-to-date. If you look 
at the HTML elements in the DOM, you will see that the li elements don’t contain any content. This is a problem that 
is so common that I want to demonstrate how to fix it even though it results from a JavaScript, rather than AngularJS, 
feature.

Вот код из 15-11 который добавляет функцию закрытия http://jsbin.com/ducihibahi/1/edit?html,output

источник

2014-12-12 11:37:13

Большое вам спасибо за то, что дал мне знать :) – anhldbk

Большое вам спасибо! – anhldbk

Использование метода $ watch в AngularJS

ответ

Смежные вопросы