Javascript 用于切换图元可见性的角度指令_Javascript_Angularjs_Rootscope

Javascript 用于切换图元可见性的角度指令

javascript angularjs

Javascript 用于切换图元可见性的角度指令,javascript,angularjs,rootscope,Javascript,Angularjs,Rootscope,我构建了一个将$rootScope.showContent值更改为true或false的指令然后我使用ng show=“showContent”隐藏或显示元素这种方法可以很好地工作，但我希望避免使用$rootScope和scope.apply（）函数。你能给我建议一个更好的方法吗下面是一些代码： HTML <body ng-app="myApp"> <div ng-controller="AppCtr"> <hide-amounts

我构建了一个将$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>


你好，来自h1
巴拉圭人你好
你好，来自h1
巴拉圭人你好

棱角分明

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

var myApp=angular.module（'myApp'，[]）；
myApp.run（函数（$rootScope）{
$rootScope.showContent=true；
})
myApp.controller（“AppCtr”，函数（$scope）{
})
.directive（'hideAmounts'，[“$rootScope”，function（$rootScope）{
返回{
限制：“E”，
替换：正确，
模板：“”，
链接：函数（范围、元素、属性）{
元素。单击（函数（）{
作用域：$apply（函数（）{
$rootScope.showContent=！$rootScope.showContent；
})
返回false；
})
}
};
}]);

Jsfiddle link：（Jsfiddle不工作不知道为什么：p）

老实说，定义指令只是切换父控制器上的标志不是个好主意

只用

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

相反

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

1）将参数传递给指令


var myApp=angular.module（'myApp'，[]）；
myApp.controller（“AppCtr”，函数（$scope）{
$scope.obj={}；
$scope.obj.showmounts=true；
$scope.showAmounts=true；
})
.directive（'hideAmounts'，[“$rootScope”，function（$rootScope）{
返回{
限制：“E”，
替换：正确，
作用域：{show:'='}，
模板：“”，
链接：函数（范围、元素、属性）{
元素。单击（函数（）{
作用域：$apply（函数（）{
scope.show=！scope.show；
})
返回false；
})
}
};
}]);

2）通过在指令中调用$scope.emit（'message'，param）并在父控制器$scope.on（'message，function（s，param）{}）上注册侦听器，将消息发送到父控制器。

除非需要，否则避免使用隔离的作用域指令。在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();
            })
        }
    };
}]);

var myApp=angular.module（'myApp'，[]）；
myApp.controller（“AppCtr”，函数（$scope）{
$scope.obj={}；
$scope.obj.showmounts=true；
$scope.showAmounts=true；
})
.directive（'hideAmounts'，[“$rootScope”，function（$rootScope）{
返回{
限制：“E”，
替换：正确，
模板：“”，
链接：函数（范围、元素、属性）{
元素。单击（函数（）{
scope.showAmounts=！scope.showAmounts；
作用域：$apply（）；
})
}
};
}]);

另一件事是您可以在指令中使用父范围（直到它不是一个独立的范围指令）

谢谢你的帮助！非常感谢：）

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