13

オプションの「disable」属性を必要とするカスタムナビゲーションディレクティブがありますが、それが可能かどうかさえわかりません。

私のメインコントローラーでは：

.controller('NavCtrl', ['UserResource','RoleResource'], function(UserResource,RoleResource){
      var user = UserResource.getUser();
      var roles = RoleResource.getRoles();
      UserService.init(user, roles); //????

});

私の指示では：

.directive('navItem', function(){
    return{
        restrict: 'A',
        scope: {
            text: '@',
            href: '@',
            id: '@',
            disable: '&'

        },
        controller: function($scope, $element, $attrs){
            $scope.disabled = ''; //Not sure I even need a controller here
        },
        replace: true,
        link: function(scope, element, attrs){
            scope.$eval(attrs.disable);
        },
        template: '<li class="{{disabled}}"><a href="{{href}}" id="{{id}}">{{text}}</a></li>'

    }

});

私のHTMLでは、次のようなことをしたいと思います。

<div data-nav-item text="My Text" href="/mytemplate.html" id="idx"
     disable="UserService.hasRole('ADMIN,BILLING') && someOtherFn(xxx) || ...">
4

4 に答える 4

8

$eval 呼び出しを

scope.$parent.$eval(attrs.disable);

attrs.disableディレクティブの分離スコープではなく、親スコープに含まれる式を評価する必要があるためです。ただし、「&」構文を使用しているため、親スコープの式が自動的に評価されます。したがって、代わりに次のことを行ってください。

if(angular.isDefined(attrs.disable)) {
    scope.disable();
}

フィドル。

于 2013-03-05T17:39:56.507 に答える
0

同じことを行う 1 つの方法は、このhttp://jsfiddle.net/fFsRr/7のようなものです。

todisableornot="rights[1]"をこのように表現に置き換えることができますtodisableornot="UserService.hasRole('ADMIN,BILLING') && someOtherFn(xxx) || ..."。

Mark Rajcok が言ったtodisableornotように、そのプロパティを呼び出すたびに、そのプロパティは親スコープで評価されます。そう

<li ng-class="{adminRole:todisableornot()}"><a href="{{href}}" id="{{id}}">{{text}}</a></li>プロパティが true と評価された場合 (親スコープのコンテキストで)、adminRoleクラスを適用します。todisableornot

これをテストするには、$scope.rights =[true, false];

于 2013-03-06T04:31:32.003 に答える
0

この特定の問題に対するより適切な実装は、複雑なステートメントから割り当てられた値を持つ単純なモデル プロパティへのオプションのバインディングを持つことです。Angular のドキュメントでは、ベスト プラクティスは関数ではなくモデル プロパティにバインドすることであると繰り返し述べています。ディレクティブの「&」バインディングは、ディレクティブからその親にデータを渡す必要があるコールバックの実装に主に役立ちます。

オプションのバインディングを実装すると、次のようになります。

コード：

angular.module("testApp", [])
.controller("testCtrl", ["$scope", function testCtrl($scope) {
    $scope.myFlag = false;
}])
.directive("testDir", function testDir() {
    return {
        restrict: "EA",
        scope: {
            identity: "@",
            optional: "=?"
        },
        link: function testDirLink($scope, $element, $attrs) {
            if (typeof $scope.optional == "undefined") {
                $scope.description = "optional was undefined";
            }
            else {
                $scope.description = "optional = '" + $scope.optional + "'";
            }
        },
        template: "<div>{{identity}} - {{description}}</div>"
    };
});

HTML:

<div ng-app="testApp" ng-controller="testCtrl">
    <test-dir identity="one" optional="myFlag"></test-dir>
    <test-dir identity="two"></test-dir>
</div>

フィドル: http://jsfiddle.net/YHqLk/

于 2014-06-23T14:27:11.060 に答える