How to display template when scope change [Angular directive]

Question

Here is my directive:

function ajaxMessageData()
{
    var ajaxMessage = {
        link: link,
        restrict: "EA",
        template: "success",
        scope: {
            success: '='
        }
    };

    return ajaxMessage;

    function link(scope, elm, attrs)
    {

            console.log(scope.success);
            scope.$watch(attrs.success, function (newValue) {
                console.log("Changed to " + newValue);
            });

    }
}

and in html:

<ajax-message success="vm.message"></ajax-message>

Problem is with scope inside directive I get initial message from vm.message (it is my controller var) but when my vm.message change it not detectd in directive... Also I would like to template show only if I get success message from vm.success. Anyone know how to accomplish this? Thanks

Try scope.$apply()

valverde93
– valverde93

2016-02-11 15:05:32 +00:00
Commented Feb 11, 2016 at 15:05 — valverde93
– valverde93, Commented Feb 11, 2016 at 15:05

null · Accepted Answer · 2016-02-11 15:26:27Z

You're passing the wrong argument to the $watch. It should be an expression -- not the value of the attrs 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.

Collectives™ on Stack Overflow

How to display template when scope change [Angular directive]

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related