Angular自定义指令-$ scope。$ watch不触发

乔霍布斯

我正在尝试使用Angular UI代码来启发下拉指令。

我可以在打开和关闭下拉列表的意义上使它正常工作,但是我尝试对其进行扩展,以便“ dropdownManager”服务可以关闭页面上的所有下拉列表,以便可以使用来打开和关闭该下拉列表。页面控制器代码。

为此,我创建了一个名为“ is-open”的属性,并在其上放置了一个角形表。不幸的是,当控制器更新属性或从指令自身的打开/关闭函数更新范围变量时,此监视无法触发。我知道值在变化,因为否则下拉列表将无法打开和关闭,但是手表绝对不会变硬,因为其中包含console.log。

奇怪的是,由于console.log被写入,它在首次初始化时会为页面上的每个下拉菜单触发一次!

无论如何,我很努力,但是有太多的依赖关系,对不起,但是我设法尽可能地减少了代码,因此希望经验丰富的Angular用户应该很容易理解。

angular.module('directives').directive('dropdown', function () {

    return {

        restrict: 'EA',
        scope: {
            isOpen: '=?',
        },

        link: function ($scope, $element, $attrs, ngModel) {


            // Defaults
            $scope.isOpen = false;

            // Watch the isOpen variable
            $scope.$watch('isOpen', function(value) {

                console.log("Scope Changed", $scope.isOpen);

                // Open or close this panel
                if (value === true){
                    $scope.openDropdown();
                }
                else{
                    $scope.closeDropdown();
                }

            });            


            // Open Dropdown
            $scope.openDropdown = function($event){

                $scope.isOpen = true;

                var panelEl = $element.find('[dropdown-panel]');

                panelEl.slideDown(100, function(){
                    $element.addClass('is-open');
                });

            };



            // Open Dropdown
            $scope.closeDropdown = function($event){

                $scope.isOpen = false;

                var panelEl = $element.find('[dropdown-panel]');

                $element.removeClass('is-open');

                panelEl.slideUp(100);

            };


            // Toggle Dropdown
            $scope.toggleDropdown = function ($event) {

                if(!$scope.isOpen){
                    $scope.openDropdown();
                }

                else{
                    $scope.closeDropdown();
                }

            };


            // Add click event to toggle element
            $element.find('[dropdown-toggle]').bind('click', $scope.toggleDropdown);


        }        

    };

});
乔霍布斯

好的,所以我最终找到了答案。

这:

$element.find('[dropdown-toggle]').bind('click', $scope.toggleDropdown);

需要成为:

$element.find('[dropdown-toggle]').bind('click', function(){
    $scope.$apply($scope.toggleDropdown);
});

我认为这是因为jQuery click事件是在“ Angular世界之外”发生的,因此将其包装在apply中将导致摘要周期发生在click之后,然后触发手表。

尽管如此,请不要相信我。我说的是字,但我真的不知道它们是什么意思。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

$ scope。$ watch不会在每次更改时触发

scope。$ watch与指令一起返回未定义的属性值

在$ scope内不触发反跳。

Angular.js-不插入$ scope

AngularJS指令$ scope。$ watch的双向绑定不起作用

自定义ArrayAdapter AutoCompleteTextView不触发

$ scope。$ watch不触发(控制器为vm)

为什么$ scope.info在自定义指令的ng-change上绑定较晚

如何在自定义指令上触发visitInputObject方法?

调用angular.extend不会导致$ scope。$ watch触发

Watch无法在另一个自定义元素指令中使用的自定义属性指令中工作

带scope。$ watch的Angular指令强制验证其他字段

如何在我的自定义指令上触发方法?

属性更新时不会触发$ scope。$ watch

$ scope。$ watch在jQuery onchange之后不触发?

AngularJS:指令中的值更改时,$ watch不触发

从指令添加值时,数组上的$ scope。$ watch不更新

attrs。$ set在scope。$ watch函数中保持指令忙

在AngularJS中,如何创建一个自定义验证指令,该指令采用$ scope变量并将其与ng-model比较是否相等?

角度UI路由器视图的控制器会导致$ scope。$ watch不触发吗?

$ scope。$ watch(var,function)未定义不是函数

使用自定义指令,ng-show和$ scope在Angularjs中隐藏/显示元素

$ scope变量的更改未触发角$ watch

angularjs指令未使用scope。$ watch进行更新

scope。$ eval在自定义指令的链接函数中不起作用

没有$ scope.digest,$ watch不会触发

从自定义指令内部手动触发ngChange

scope。$ watch在控制器内不触发

Angular不选择$ scope.variable_name