Question

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

然后我使用ng-show =＆＃34; showContent＆＃34;为了隐藏或显示元素。

这种方法工作正常但我想避免使用$ 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）

Answer 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（＆＃39; message＆＃39;，param）并在父控制器$ scope.on上注册监听器来向父控制器发送消息（＆＃39; message，function（ s，param）{}）

Answer 2

除非需要，否则请避免使用隔离范围指令。而且你知道在AngularJS 1.2.x之前，孤立的scoped和normal指令差别不大。但是使用1.2.x他们已经改变了他们的行为。所以，我必须改变我的项目中的所有指令。所以，请确保您使用，除非需要。

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();
            })
        }
    };
}]);

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

切换元素可见性的角度指令

2 个答案: