Question

我有指令在我的应用程序中调出侧边栏。我试着编写一些代码来切换这个侧边栏内的一些内容。但当我触发切换功能时，没有任何反应。

这是我的指示：

menuItem.directive("menuItem", function() {
 return {
     restrict: "E",
     template: "<div ng-click='toggle()' ng-transclude></div>",
     transclude: true,
     scope: {
         hash: "@"
     },
     link: function($scope) {
         $scope.toggle = function(e) {
             $scope.test = !$scope.test;
             console.log($scope.test);
             $scope.$apply(); // This here brings up error $rootScope: inprog
         }
     }
 }
});

这是我的HTML：

 <menu visible="leftVisible" alignment="left">
                          <menu-item hash="first-page">
                              <div>
                                  Testing
                              </div>
                              <ul ng-show="test">
                                 <li>1</li>
                                 <li>2</li>
                              </ul>
                          </menu-item>
                </menu>

如何解决此问题，使ul可以切换？

Answer 1

原因是您的指令和模板具有不同的范围。当您在test方法中更改toggle字段时，在指令范围内更改它，而ng-show指令使用来自控制器范围的变量。并且您的指令不应该依赖于控制器的标记（以及特定于控制器的变量，如test）。您可以在指令中创建变量绑定，以便它负责更改可见性，控制器标记将负责使用此变量来显示或隐藏您的菜单项。这是控制器的标记

<menu visible="leftVisible" alignment="left">
    <menu-item hash="first-page" show="someVar">
        <div>
            Testing
        </div>
        <ul ng-show="someVar">
            <li>1</li>
            <li>2</li>
        </ul>
    </menu-item>
</menu>

这是你指令的代码

menuItem.directive("menuItem", function () {
    return {
        restrict: "E",
        template: "<div ng-click='toggle()' ng-transclude></div>",
        transclude: true,
        scope: {
            hash: "@",
            show: '='
        },
        link: function ($scope) {
            $scope.toggle = function (e) {
                $scope.show = !$scope.show;
            }
        }
    }
});

在这种情况下，您的指令不依赖于myVar变量。它使用show属性控制可见性。我还删除了$apply调用，因为您的处理程序使用ng-click指令调用，这意味着angular知道可能的更改，您不必显式启动摘要循环。

使用ng-show切换不在指令中工作

1 个答案: