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

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

原因是你的指令和你的模板有不同的作用域。当您在 toggle 方法中更改 test 字段时，您会在指令范围内更改它，而 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 切换不在指令中工作

Toggle with ng-show not working in directive

angularjs

angularjs-directive

ng-show

angularjs-ng-transclude