如何在$ scope。$ apply上执行angular指令

Question

I have a directive that controls an image displayed in the DOM:

summariesApp.directive('changePlus', function () {
    return function changePlus(scope, element, attr) {
        if (scope.$parent.Tab == "MultiVariant")            
            if (scope.$parent.multis[parseInt(attr.a)].show) {
                    element[0].src = 'Images/hide.png';
                }
                else {
                    element[0].src = 'Images/show.png';
                }
            }
            else {
                element[0].src = 'Images/show.png';
            }

            element.on('mousedown', function (event) {
                var imgName = event.target.src.split("/");
                if (imgName[imgName.length - 1] == 'show.png') {
                    event.target.src = 'Images/hide.png'
                }
                else {
                    event.target.src = 'Images/show.png'
                }
            });
        }
    });

The issue is that when I call a service I would like for this directive to run. I thought that by using $scope.$apply, and having the digest cycle fire, this directive would be evaluated but it is not. Is there any way for me to have the view reevaluate with the directives on $scope.$apply?

Answer 1

I think you are looking for $scope.$watch :

   $scope.$watch('myModelProperty', function() {
       // do something
   });

   $scope.buttonClicked = function() {
      $scope.myModelProperty = "foo"; // This will trigger $watch expression
   };

But a best practice is to bind an attribute of your directive on your service. Avoid as much as possible to use $apply and $watch.

With attribute :

angular.module('myModule', []).directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      myVar: '=' // two ways data-binding
    },
    link: function(scope, element, attrs, controllers) {
      scope.myVar //myVar is available in your scope and is bind to your model
    },
    templateUrl: 'my-template.html'// myVar is available in your template and is bind to your model
  };
});