Question

我正在尝试使用链接函数创建一个指令，它可以更改＆＃34; varName＆＃34;在范围内（即在输入标签中）。注意，指令模板具有相同的＆＃34; varName＆＃34;如在控制器＆amp;没有使用范围属性。

以下是发生的事情：

案例1：如果我点击自定义元素，＆＃34; runFn＆＃34; $ scope中定义的函数被调用，但＆＃34; varName＆＃34;没有改变。

案例2：如果我点击div标签，＆＃34; runFn＆＃34;函数也被称为AND＆＃34; varName＆＃34;改变了。

我尝试了3种方法，但似乎无法通过链接功能更改＆＃34; varName＆＃34;值。有人可以解释为什么n提供解决方案吗？感谢。

代码：

<body ng-app="moduleA">
<div ng-controller="ctrlA"> 
    <input type="text" ng-model="varName">
    <custom></custom>
    <div ng-click="runFn()">click for new value</div>
</div>  
<script>
window.onload=(function(){  
    "use strict";
    var app = angular.module('moduleA', []);
    app.controller("ctrlA", function($scope){
        $scope.varName = "old value";
        $scope.runFn = function(){
            $scope.varName = "new value";
            console.log("run fn");
        };
    });
    app.directive("custom", function(){
        return {
            restrict: "E",          
            template: '<div>{{varName}}</div>',
            replace: true,  
            link: function(s, e, a){
                e.on("click", function(){ 
                    s.varName = "new value";   //didn't work
                    s.runFn();        //didn't work
                    s.runFn.call(s);  //didn't work
                });
            }
        };

    });     
})(); // end windows onload
</script>
</body>

Answer 1

我认为您忘记的是在进行更新时调用$ apply以确保更新UI。

e.on("click", function(){
  //Call $apply to ensure a $digest loop
  // get's kicked off
  s.$apply(function(){
    s.varName = "new value";
  });
});

Answer 2

你的点击功能在角度范围内执行。您需要以有角度的方式处理点击事件。更改您的指令如下

app.directive("custom", function(){
    return {
        restrict: "E",          
        template: '<div ng-click="divClick()">{{varName}}</div>',
        replace: true,  

        link: function(s, e, a){

          s.divClick = function(){          
              s.varName = "new value";
              s.runFn();       
              s.runFn.call(s);  
            }
        }
    };
});

<强> JSBIN

AngularJs指令链接函数不能更改控制器范围中定义的变量

2 个答案: