angularjs - 从链接函数单击处理程序调用控制器方法不会更新视图

Question

我的问题如下：我有一个具有隔离范围的指令，我想将“点击”回调绑定到元素。长话短说，我想做类似的事情：

...
<div test value='name' call='reset()'></div>
...

app.directive('test', function() {
    return {
        template: '<button>{{value}}</button>', 
        scope: { 
            value: '=', 
            call: '&' 
        },
        link: function(scope, elem, attrs){
            elem.bind('click', function(){
                scope.call();
            })
        }
    }
});

var myCtrl = function($scope){
    $scope.name = 'John';

    $scope.reset = function(){
        $scope.name = "Some random name";
        console.log('reset name!');
    };
}

唉，这不起作用 - 它触发了reset()函数，但控制器的范围没有改变（$scope.name保持不变）。但是，如果我在模板中进行绑定：

template: '<button ng-click="call()">{{value}}</button>' 

一切正常。问题是在实际任务中我不使用模板选项，所以我想问一下是否有办法在链接函数中进行这种绑定？

谢谢！

Answer 1

当您在指令中设置的点击处理程序运行时，它会在 Angular 的“外部”运行。 $scope.name实际上正在设置（记录它以查看），但是您的视图没有更新，因为 Angular 不知道更改。添加scope.$apply()到您的点击处理程序以使 Angular 进入摘要循环，您的视图将更新。

link: function(scope, elem, attrs){
   elem.bind('click', function(){
      scope.call();
      scope.$apply();
   })
}

小提琴。

Answer 2

<div test value='name' ng-click="call()"></div>

没有指令。

如果你想保持 Angular 风格，你应该 /*不要使用*/ 尽可能少地使用自定义绑定