Javascript 在AngularJS中使用$watch方法_Javascript_Angularjs_Watch

Javascript 在AngularJS中使用$watch方法

javascript angularjs

Javascript 在AngularJS中使用$watch方法,javascript,angularjs,watch,Javascript,Angularjs,Watch,我在看亚当·弗里曼的《支持安格拉斯》一书。但我还是停留在清单15-10中。他提供的代码根本不起作用演示代码如下。它应该以以下方式工作：当我们点击按钮修改价格时，这个列表必须自动更新。你能告诉我怎么修改他的密码吗？我在谷歌上搜索了很多，但是 <!doctype html> <html ng-app="exampleApp"> <head> <script src="angular.js"></script> <li

我在看亚当·弗里曼的《支持安格拉斯》一书。但我还是停留在清单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>


angular.module（“exampleApp”，[]）
.controller（'defaultCtrl'，函数（$scope）{
$scope.products=[
{名称：“苹果”，类别：“水果”，价格：1.20，有效期：10}，
{名称：“香蕉”，类别：“水果”，价格：2.42，有效期：7}，
{名称：“梨”，类别：“水果”，价格：2.02，有效期：6}
];
$scope.incrementPrices=函数（）{
对于（变量i=0；i<$scope.products.length；i++）{
$scope.products[i].价格+=1；
}
}
})
.指令（“无序列表”，函数（）{
返回函数（范围、元素、属性）{
var data=scope[attrs[“无序列表”]；
var-propertyExpression=attrs[“listProperty”]；
if（角度isArray（数据））{
var listElem=angular.element（“”）；
元素。追加（listElem）；
对于（变量i=0；i”）；
追加（itemElement）；
var watcherFn=函数（watchScope）{
返回watchScope.$eval（propertyExpression，数据[i]）；
}
范围$watch（watcherFn，函数（newValue，oldValue）{
itemElement.text（newValue）；
});
}
}
}
})
产品
变价

继续阅读，在下一个捕获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，它添加了函数闭包

控制台上是否出现任何错误？您的watcherFN函数似乎希望将作用域作为输入参数，但在$watch定义中，它没有提供给它-我希望出现类似“无法调用未定义的$eval”的错误。不，没有错误，这是本书的一个特点，请参阅我的答案，答案来自15-11。非常感谢您让我知道：）