returning scope.$watch value to a link function of a directive
Question
I am using a custom directive which attempts to append some HTML to its element via a link function.
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.
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; does not seem to be appending itself to the tmpl variable.
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
EDIT : I have updated the Plnkr which shows what I am trying to do a little bit better:
http://plnkr.co/edit/SV5jxsc7DhB9hH9Pob7r?p=preview
why is 'hi' undefined?
2 answers
solution1
1 2015-04-19 01:37:57
Does this do what you're looking for?
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);
}
};
});
solution2
1 ACCPTED 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.
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.
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. So typing hello , will make your tmpl have h , he , hel , hell , and hello appended to it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.