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

 }])

当addSearchsermrid父控制器中的playerSearchSpinnerOn属性发生变化时，我希望我的'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是什么，我怀疑你有一些问题。

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

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上使用属性作为连字符（-）分隔＆amp;在指令中它将用作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);
            }
        });


    }
 }

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

3 个答案: