Question

你好汉堡包菜单有以下指令：

angular.module('app.directives')
    .directive('hamburger', hamburger);

    // Injecting Dependencies
    hamburger.$inject = ['$rootScope', '$timeout'];

    // Directive's Function, Where All Code is Declared and Executed
    function hamburger($rootScope, $timeout) {
        return {
            restrict: 'E',
            scope: {
                open: '='
            },
            templateUrl: 'tpls/directives/hamburger.html',
            link: function (scope, elem, attr, ctrl) {

                scope.$watch('open', function(newValue, oldValue) {

                    if (newValue == true) {
                        $timeout(function () {
                            elem.addClass("open");
                        }, 2000);

                        console.log("This is true");
                    }
                    else {
                        $timeout(function () {
                            elem.removeClass("open");
                        }, 2000);

                        console.log("This is false");
                    }

                });


            }
        }
    }

这是模板：

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

这就是我在视图中使用它的方式：

<hamburger class="menu-btn2 pull-left" snap-toggle="left" open="vm.toggleMenu" ng-click="toggle()" ng-dblclick="doNothing()"></hamburger>

现在我在视图中有一个函数，它在点击时为元素添加一个类。这会打开一个侧边菜单。

现在当我的侧边菜单打开时，我想通过添加＆＃34;打开＆＃34;来更改我的菜单图标。类。

在我的指令中，我有一个名为＆＃34的属性;打开＆＃34;我绑定到我的控制器和我的指令。在我的指令＆＃39; 链接功能中，我有一块手表应该观察绑定到＆＃34;打开＆＃34;当它变为真时，它应该是一个类＆＃34;打开＆＃34;当元素变为＆＃34; false＆＃34;它应该删除班级＆＃34;打开＆＃34;来自元素。

到目前为止，我已尝试过所有内容，但似乎无法使其正常运行。我的终端中没有显示任何错误，我试图在我的$ watch中执行console.log()以查看它是否实际检测到值何时更改但是也没有工作，我的控制台中没有记录任何内容

这是我的切换功能：

vm.toggleMenu = false;
vm.toggle = function () {
  vm.toggleMenu = !vm.toggleMenu;
};

Answer 1

好的，所以我发现了问题所在，我使用的是controllerAs语法，从而创建了我的控制器实例（我相信它的工作原理）为 vm 。出于某种原因，我仍然无法完全理解我无法将该属性绑定到该实例中的变量。当我将其更改为 scope.toggleMenu 而不是 vm.toggleMenu 时，它才有效。

我对angularjs很新，所以我假设双向绑定仅适用于范围变量，或者当您不使用ControllerAs语法时。

Angular中的自定义指令

1 个答案: