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:

1. You're passing the wrong argument to the $watch. It should be an expression -- not the value of the attrs object.
2. You can use the ng-if directive to control visibility.
3. 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.