How To Display Template When Scope Change [angular Directive]
Here is my directive: function ajaxMessageData() { var ajaxMessage = { link: link, restrict: 'EA', template: 'success', scope: { suc
Solution 1:
- You're passing the wrong argument to the
$watch
. It should be an expression -- not the value of theattrs
object. - You can use the
ng-if
directive to control visibility. - Not sure if this is intended, but the success template maybe needs a curly binding:
"{{ success }}"
Example:
myApp.directive('ajaxMessage', function() {
return {
restrict: 'EA',
scope: {
success: '='
},
// Use anything you like in the template -- note the ng-if will only// render the element when the success property has a value// Also note the {{ binding }}
template: "<div ng-if=\"success\" class=\"alert alert-info\">{{ success }}</div>",
link: function($scope, $element, $attrs) {
// Watching $scope.success (not the $attrs.success)$scope.$watch('success', function(value) {
console.log('Success is now:', value);
});
}
};
});
... or see this plunker in action.
Post a Comment for "How To Display Template When Scope Change [angular Directive]"