切换元素可见性的 Angular 指令答案

【问题标题】：Angular Directive that Toggles Visibility of Elements切换元素可见性的 Angular 指令
【发布时间】：2017-12-15 00:03:39
【问题描述】：

我已经构建了一个指令，将 $rootScope.showContent 值更改为 true 或 false。

然后我使用 ng-show="showContent" 来隐藏或显示元素。

这种方法效果很好，但我想避免使用 $rootScope 以及使用 scope.apply() 函数。你能建议我一个更好的方法吗？

您会在下面找到一些代码：

HTML

<body ng-app="myApp">
    <div ng-controller="AppCtr">
        <hide-amounts ></hide-amounts>

        <div ng-show="showContent">
            <h1>Hello from h1</h1>
            <p>Hello from paragarapsh</p>
        </div>
         <div ng-show="showContent">
            <h1>Hello from h1</h1>
            <p>Hello from paragarapsh</p>
        </div>
    </div>
</body>

角度

var myApp = angular.module('myApp', []);

myApp.run(function ($rootScope) {
    $rootScope.showContent = true;
})

myApp.controller("AppCtr", function ($scope) {

})
.directive('hideAmounts',["$rootScope", function ($rootScope) {
    return {
        restrict: "E",
        replace: true,
        template: '<a href="#">Hide Content</a>',
        link: function (scope, element, attrs) {
            element.click(function () {
                scope.$apply(function () {
                    $rootScope.showContent = !$rootScope.showContent;
                })
                return false;
            })
        }
    };
}]);

Jsfiddle 链接：http://jsfiddle.net/RickyStam/AkVzz/（jsfiddle 不工作不知道为什么：P）

【问题讨论】：

标签： javascript angularjs rootscope

【解决方案1】：

说实话，定义指令只是为了在父控制器上切换标志并不是一个好主意

只需使用

<button ng-click="showContent = !showContent ">

改为。

但是，如果您真的想摆脱 og $rootScope，您可以：

1) 将参数传递给指令jsfiddle

 <hide-amounts show="showAmounts" ></hide-amounts>

var myApp = angular.module('myApp', []);

myApp.controller("AppCtr", function ($scope) {
    $scope.obj = {};
    $scope.obj.showAmounts = true;
    $scope.showAmounts = true;
})
.directive('hideAmounts',["$rootScope", function ($rootScope) {
    return {
        restrict: "E",
        replace: true,
        scope: {show:'='},
        template: '<a href="#">Hide Amounts</a>',
        link: function (scope, element, attrs) {
            element.click(function () {
                scope.$apply(function () {
                    scope.show = !scope.show;
                })
                return false;
            })
        }
    };
}]);

2) 通过在指令中调用 $scope.emit('message', param) 并在父控制器上注册监听器 $scope.on('message, function(s, param){})

【讨论】：

感谢您的帮助！非常感谢:)

【解决方案2】：

除非需要，否则避免使用隔离范围指令。你知道在 AngularJS 1.2.x 之前隔离作用域指令和普通指令没有太大区别。但是在 1.2.x 中，他们改变了他们的行为。所以，我不得不改变我项目中的所有指令。因此，请确保，除非需要，否则使用 then。

var myApp = angular.module('myApp', []);
myApp.controller("AppCtr", function ($scope){
    $scope.obj = {};
    $scope.obj.showAmounts = true;
    $scope.showAmounts = true;
})

.directive('hideAmounts', ["$rootScope", function ($rootScope) {

    return {
        restrict: "E",
        replace: true,
        template: '<a href="#">Hide Amounts</a>',
        link: function (scope, element, attrs) {
            element.click(function () {
                scope.showAmounts = !scope.showAmounts;
                scope.$apply();
            })
        }
    };
}]);

另外一件事是你可以在指令中使用父作用域（直到它不是一个孤立的作用域指令）。

【讨论】：