0

$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)

4

2 に答える 2

1

正直なところ、親コントローラーのフラグを切り替えるためだけにディレクティブを定義するのはお勧めできません

ただ使う

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

代わりは。

ただし、本当に $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){}) にリスナーを登録して、メッセージを親コントローラーに送信します。

于 2014-06-30T08:28:15.537 に答える
0

必要な場合を除き、独立したスコープ ディレクティブの使用は避けてください。また、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();
            })
        }
    };
}]);

もう1つは、ディレクティブで親スコープを使用できることです（分離されたスコープディレクティブでなくなるまで）。

于 2014-06-30T10:41:56.327 に答える