Question

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

...
<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输入digest cycle，您的视图将会更新。

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

Fiddle

Answer 2

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

没有指示。

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

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

2 个答案: