Question

我正在阅读一本angularJS书，发现一个无效的示例代码= /。我正在寻找，但没有找到答案。基本上我正在测试指令的“控制器”选项，代码使用一个模板，该模板具有一个表达式，用于计算指令控制器范围的值（“目标”）。但价值不是更新，我不知道为什么。

以下是代码：(fiddle)

HTML

<div ng-app="myApp">
    <div goal game time="Cruze vs Holy" ></div>
</div>

JS

var app = angular.module('myApp', []);

app.directive('game', function () {
   return {
       scope: {
           times: '@'
       },
       controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
           $scope.goals = 0;
           this.increment = function() {
               $scope.goals++;
               console.log($scope.goals);
               alert("goals = " + $scope.goals);
           }
       }],
       template: "<p>Match: [{{times}}]</p><b>Match goals: </b> {{goals}}"
   };
});

app.directive('goal', function() {
    return {
        require: 'game',
        link: function (scope, el, attrs, gameController) {
            var b = angular.element("<p><button>Increase Match goals</button></p>");
            b.on('click', function() {
                gameController.increment();
            });
            el.append(b);
        }
    };
});

Answer 1

感谢@vinagreti和@mutil。

只是为其他有相同问题的人解释，当您从角度环境的“外部”更改某个范围变量时，需要使用$ apply（或$ digest，具体取决于具体情况），因为“onclick”事件由纯javascript生成而不是Angular事件（例如ng-click）您必须调用$ apply以使范围中的更改应用于视图

不评估模板表达式

1 个答案: