如何使指令对父范围的值变化做出反应？ angularjs

Question

我想创建一个指令，在其中观察父作用域中的'playerSearchSpinnerOn'属性。 值的变化，而不是在我的指令链接函数中执行代码。 目前，当值发生变化时，我的观察功能未被触发。

HTML

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

指示

 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);
                }
            });


        }
    }

父控制器

 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'指令对此更改做出反应。

我哪里错了？

Answer 1

您应该使用隔离范围 ，而不是观察属性

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);
                }
            });
        }
    }

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

另外，请阅读此博客，以获取有关隔离范围的精彩指南。

Answer 2

解决了。 我必须使用$ apply服务包装playerSearchSpinnerOn属性。 这是必要的，因为改变这个属性是在有角度的知识之外发生的。 调用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;
                 });


             });
         }
     };

Answer 3

你做了某种拼写错误，它应该是attr.$observe而不是attr.observe ，$ observe将像一个指令一样工作，它会在插值（ {{}} ）指令时调用attr.$observe函数属性得到评估。 同样在UI上使用属性作为连字符（ - ）分隔＆在指令中它将被用作camelCase而不是

HTML

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

指示

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);
            }
        });


    }
 }