将scope。$ watch值返回到指令的链接函数
[英]returning scope.$watch value to a link function of a directive
问题描述
I am using a custom directive which attempts to append some HTML to its element via a link function. 
我正在使用一个自定义指令，该指令试图通过链接功能将一些HTML附加到其元素。
I am able to append the string of the tmpl variable to the element just fine, but I am scope.$watch ing the scope.value which is defined by an ng-model input from a user, and it's not appending. 我可以将tmpl变量的字符串附加到元素上，但是我是scope.$watch scope.value ，它是由用户的ng-model输入定义的，并且没有附加。
To be clear, I would like to have the ng-model ed value to be appended to the directive via the scope.$watch in the link function—however, return tmpl += oldValue; 需要明确的是，我想通过链接将ng-model ed值附加到指令的scope.$watch链接功能中的scope.$watch —但是， return tmpl += oldValue; does not seem to be appending itself to the tmpl variable. 似乎没有将自身附加到tmpl变量。
What am I doing wrong? 我究竟做错了什么？
Many thanks. 非常感谢。
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<input ng-model="scoped.value">
{{scoped.value}}
<br><br>
<artboard></artboard>
</body>
</html>
And the app: 和应用程序：
angular.module('app', [])
.directive("artboard", function(){
return {
restrict: 'E',
link: function (scope, element) {
var tmpl = "Please append newValue here:";
scope.$watch("scoped.value", function(newValue){
return tmpl += newValue;
});
tmpl += "\<br\>\<br\>\<br\>" + "End appendage";
element.append(tmpl);
}
};
});
Plnkr: http://plnkr.co/edit/SV5jxsc7DhB9hH9Pob7r?p=preview Plnkr： http ：//plnkr.co/edit/SV5jxsc7DhB9hH9Pob7r？p = preview
EDIT : I have updated the Plnkr which shows what I am trying to do a little bit better: 编辑 ：我已经更新了Plnkr，它显示了我正在尝试做的更好的一点：
http://plnkr.co/edit/SV5jxsc7DhB9hH9Pob7r?p=preview http://plnkr.co/edit/SV5jxsc7DhB9hH9Pob7r?p=preview
why is 'hi' undefined? 为什么“ hi”没有定义？
2 个解决方案
解决方案1
1 2015-04-19 01:37:57
Does this do what you're looking for? 这是您要找的吗？
http://plnkr.co/edit/rORuEK7kL8v3Feya8up2?p=preview http://plnkr.co/edit/rORuEK7kL8v3Feya8up2?p=preview
angular.module('app', [])
.directive("artboard", function(){
return {
restrict: 'E',
link: function (scope, element) {
var tmpl = "Please append oldValue here:";
var end = "\<br\>\<br\>\<br\>" + "End appendage";
scope.$watch("scoped.value", function(newValue, oldValue){
while(element[0].firstChild){
element[0].removeChild(element[0].firstChild)
}
element.append(tmpl+newValue+end)
});
element.append(tmpl+end);
}
};
});
解决方案2
1 已采纳 2015-04-19 02:58:28
The problem you are having is that your scope.$watch does change the tmpl but doesn't do anything with it. 您遇到的问题是您的scope.$watch确实会更改tmpl但不执行任何操作。
If you reorganized your code to look like this, it would do the same thing it does now: 如果您将代码重新组织为如下所示，它将执行与现在相同的操作：
var tmpl = "Please append newValue here:";
tmpl += "\<br\>\<br\>\<br\>" + "End appendage";
element.append(tmpl);
scope.$watch("scoped.value", function(newValue){
return tmpl += newValue;
});
The line of code that appended the element with tmpl is only ever called when the directive is linked. 仅在链接指令时才调用将带有tmpl的元素附加到代码行。
Even if you do have your $watch function do something with tmpl, watching the scope.value will fire the callback anytime there is a change to value. 即使您确实具有$watch函数对tmpl进行了某些操作，也可以通过观察scope.value在值发生任何变化时触发回调。 So typing hello , will make your tmpl have h , he , hel , hell , and hello appended to it. 因此，键入hello ，将使您的tmpl h ， he ， hel ， hell和hello 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.