我想创建一个指令,在其中观察父作用域中的'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'指令对此更改做出反应。

我哪里错了?

#1楼 票数:4

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

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是什么,我怀疑你有一些问题。

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

#2楼 票数: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;
                 });


             });
         }
     };

#3楼 票数:1

你做了某种拼写错误,它应该是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);
            }
        });


    }
 }

  ask by ray abu translate from so

未解决问题?本站智能推荐:

1回复

如何使用AngularJS对窗口大小的变化做出反应?

我用这种方法来监视窗口调整大小事件。 但是,它的工作非常缓慢。 有人可以建议他们是否知道其他简单且不涉及复杂指令的方式。 如果我正在做的这是一个好方法,也将不胜感激。
2回复

Angularjs:使用child指令设置父指令范围值

我不确定这是怎么做的,但我的目标如下: 我有一个父指令 在父指令的块中,我有一个子指令,可以从用户那里获得一些输入 child指令将在父指令的作用域中设置一个值 我可以从那里拿走它 当然问题是父指令和子指令都是兄弟姐妹。 所以我不知道该怎么做。 注意
5回复

Angularjs注意父范围的变化

我正在编写一个指令,我需要查看更改的父作用域。 不确定我是否这样做是首选方式,但它不能使用以下代码: 它记录了窗口加载,但即使更改了overlaytype,也不会再次登录。 如何查看overlaytype以进行更改? 编辑:这是整个指令。 不完全确定为什么我会得到一个儿童
1回复

AngularJs指令访问父范围

我想根据条件显示密码字段。 另外,如果要显示密码,我想验证密码字段。 为此,我必须创建一个指令。 但是该指令为模板创建了新作用域,并且不访问父作用域来验证密码字段。 我怎样才能做到这一点?
1回复

AngularJS指令包含父范围

我正在处理一个指令,并且正在使用transclude,因此该指令使用的内部元素在其内部使用。 假设这是我指令的视图 : 指令 : 并简单地使用它: 这样很好。 这个解决方案的我的问题是$parent.opt可读性和清晰度不高...还有其他选择吗? 谢谢
1回复

AngularJS指令不更新父范围

我真的很努力尝试在我的表格上使用指令。 我在日期时间字段中需要使用插件,以保持旧的浏览器兼容性。 这是我的HTML 这是我的指令 我要完成的工作:在“父范围”中,我有$ scope.search.endDate,用于存储以后发送的日期。 我想使用没有模板的指令,并且
3回复

AngularJS:从指令更​​新父范围

我有一个角度控制器和指令 调节器 指示 HTML: 在指令中我想更新范围中的变量它在本地范围内更新但不在控制器范围内更新。如何直接更新范围?
3回复

AngularJS:从自定义指令更改父范围值

由于某种原因,我无法根据我在SO上看到的其他示例来进行这项工作。 这是我的指令: 以及在切换开关/复选框时要更改的控制器作用域值: 的HTML: 然后在我的html页面中,我有这个: 编辑: 这个版本“现在可以正常工作”,但是当我再次单击开关/复选框时