我正在尝试创建一个带有链接函数的指令,它可以更改作用域中的“varName”(即在输入标记中).注意,指令模板具有与控制器和放大器中相同的“varName”.没有使用范围属性.
这是发生了什么：
情况1：如果单击自定义元素,则会调用$scope中定义的“runFn”函数,但不会更改“varName”.
情况2：如果单击div标签,则会调用“runFn”函数并更改“varName”.
我尝试了3种方法,但似乎无法获得链接函数来更改“varName”值.有人可以解释为什么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>
解决方法
我认为您忘记的是在进行更新时调用$apply以确保更新UI.
e.on("click",function(){
//Call $apply to ensure a $digest loop
// get's kicked off
s.$apply(function(){
s.varName = "new value";
});
});
