Angularjs 如何使指令对父范围上的值的更改作出反应？安格拉斯

我想创建一个指令，它在父作用域中观察“playerSearchSpinnerOn”属性。如果值发生更改，则在“我的指令链接”函数中执行代码。目前，当值更改时，我的观察功能未被触发

html

父控制器

 monopolyMenuModule.controller('AddUsersCtrl', ['$scope', 'addUserServices', 'GameGroupDetails', function ($scope, service, GameGroupDetails) {

     // add code to call notifyUsers object.. watch pluralsight "connecting our server to client" and "how signalr works"
     $scope.playerSearchSpinnerOn = false;

     $scope.FindUsers = function () {
         if (GameGroupDetails != null) {
             service.FindUsers(GameGroupDetails).done(function () {
                 // add spinner once group has been show in invite screen
                 $scope.playerSearchSpinnerOn = true;
             });
         }
     };

 }])

当playerSearchSpinnerOn属性在AddUserCtrl父控制器中更改时，我希望我的“spinner”指令对此更改作出反应

---

哪里出了问题？

您应该使用隔离作用域，而不是查看属性

monopolyMenuModule.directive('spinner', function () {
    return {
        restrict: "A",
        scope:{
          spinnerOn: "@"
        }
        link: function (scope, elem, attr) {
            $scope.$watch('spinnerOn', function (newValue, oldValue) {
                var spinner = new spinner();
                if (newValue) {
                    // load spinner
                    spinner.spin(elem);
                }
                else if (newValue == false) {
                    // close spinner
                    spinner(false);
                }
            });
        }
    }

monopolyMenuModule.directive('spinner', function () {
  return {

    restrict: "A",
    link: function (scope, elem, attr) {
        attr.$observe('spinnerOn', function (newValue, oldValue) {
            var spinner = new spinner();
            if (newValue) {
                // load spinner
                spinner.spin(elem);
            }
            else if (newValue == false) {
                // close spinner
                spinner(false);
            }
        });


    }
 }

这样，您就不必依赖任何奇怪的基于父级的逻辑，只需传入您想要查看的值。话虽如此，我不知道这件事是什么，我怀疑你有一些问题

---

另外，请阅读博客，以获得关于隔离作用域的优秀指南。

您输入了某种类型的拼写错误，它应该是

attr.$observe

而不是

attr.observe

，$observe的工作原理与指令内的手表类似，每当插值（

{}

）时，它都会调用

attr.$observe

函数对属性的指令进行求值。此外，在UI上，将属性用作分隔的连字符（

-

）&在指令中，它将用作camelCase，而不是camelCase

HTML

<div id="addUsers" class="center" spinner spinner-on="{{playerSearchSpinnerOn}}">

---

解决了。我不得不用$apply服务包装playerSearchSpinnerOn属性。这是必要的，因为改变这个属性是在angular的知识之外发生的。调用apply（）会查找模型中的任何新更改，如果找到一个或多个，则会更新DOM

     $scope.FindUsers = function () {
         if (GameGroupDetails != null) {
             service.FindUsers(GameGroupDetails).done(function () {
                 // add spinner once group has been show in invite screen

                 // apply is needed and apply is only called in angularjs directives
                 $scope.$apply(function(){ 
                        $scope.playerSearchSpinnerOn = true;
                 });


             });
         }
     };

---

它应该是

attr.$observe

，然后所有代码都将开始工作我做了更改，但是$observe回调函数仍然没有被触发，这将是不幸的。我正在使用angular.module.config，它在编译spinner指令js脚本之后加载html视图模板（引用spinner direcitve，使用AddUsersCtrl控制器）。。。。这是一个问题吗？你能分享你的配置代码吗？您是否在指令元素中将

spinnerOn

更改为

sinner on

？另请参阅Sitepoint关于AngularJS指令的文章。对于这个简单的案例，observe被过度使用了。为什么这里需要

$apply（）

？在我的案例中，需要$apply（），因为没有发生任何会触发观察者的事情（诚然，我的案例与OP有很大的不同，但应用了相同的解决方案）。

monopolyMenuModule.directive('spinner', function () {
  return {

    restrict: "A",
    link: function (scope, elem, attr) {
        attr.$observe('spinnerOn', function (newValue, oldValue) {
            var spinner = new spinner();
            if (newValue) {
                // load spinner
                spinner.spin(elem);
            }
            else if (newValue == false) {
                // close spinner
                spinner(false);
            }
        });


    }
 }

     $scope.FindUsers = function () {
         if (GameGroupDetails != null) {
             service.FindUsers(GameGroupDetails).done(function () {
                 // add spinner once group has been show in invite screen

                 // apply is needed and apply is only called in angularjs directives
                 $scope.$apply(function(){ 
                        $scope.playerSearchSpinnerOn = true;
                 });


             });
         }
     };