Angular中的自定义指令

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>

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

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

在我的指令中，我有一个名为“open”的属性，它绑定到我的控制器和我的指令。 在我的指令的链接函数中，我有一个监视器，当它变为true时，应该监视变量绑定到“open”的值当它变为“false”时它应该是一个“打开”元素的类它应该删除该元素的“开放”类。

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

这是我的切换功能：

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

Answer 1

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

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