Question

我有以下代码行。

HTML

...
<html ng-app="myApp">
....
<div ng-controller="myController">
    <div ng-model="info.myField"></div>
    <a href="#" my-update field="info.myField">Update Me</a>
</div>

JS

var app = angular.module("myApp",[]){
app.controller("myController", ['$scope',function($scope){
    $scope.info = {
        myField = "init value"
    };
}]);    

app.directive("myUpdate",function() {
    return {
        restrict: "A",
        scope : {
            field:"="
        },
        link: function(scope, elem, attrs){
            scope.field = "Updated in link";    //Line A

            elem.bind("click",function() {
                scope.field = "Updated on click";   //Line B
            });
        }
    };
});

当我运行此代码时，控制器的info.myField更新为“在链接中更新”（在指令的A行中完成）。单击“Update Me”锚点时，将执行Directive的Line B，但不会更新控制器的info.myField。

为什么在点击事件中没有更新info.myField？我错过了什么吗？

Answer 1

Jayantha是正确的，你应该致电$apply()让它发挥作用。但你可能会问为什么你应该这样做。原因是click事件发生在Angulars世界之外。所以Angular不知道click已经发生了，你需要通过调用scope.$apply()告诉Angular它。当你有ng-click调用范围内的方法时，你不必调用$apply()，因为它是为你调用该方法的Angular，这意味着Angular知道它，并将调用$apply()为你。

Answer 2

尝试这样做，

elem.bind("click",function() {
           $scope.$apply({
              scope.field = "Updated on click";   //Line B
          });

 });

model没有在指令的click事件中更新

2 个答案: