0

追加の代わりになるAngularディレクティブをまとめようとしています

ng-disabled="!canSave(schoolSetup)"

コントローラーで定義されている関数であるフォームボタン要素でcanSaveは、次のようなパラメーターがフォームの名前です。

$scope.canSave = function(form) {
    return form.$dirty && form.$valid;
};

理想的には、送信ボタンのディレクティブを次のようにしたいです。

can-save="schoolSetup"

文字列はフォームの名前です。

それで...どうやってこれをしますか？これは私が得ることができる限りです...

angular.module('MyApp')
    .directive('canSave', function () {
        return function (scope, element, attrs) {

            var form = scope.$eval(attrs.canSave);

            function canSave()
            {
                return form.$dirty && form.$valid;;
            }

            attrs.$set('disabled', !canSave());
        }

    });

しかし、これは明らかにフォームモデルに適切にバインドされず、初期化でのみ機能します。このディレクティブ内から ng-disabled ディレクティブをバインドする方法はありますか、それとも間違ったアプローチですか?

4

2 に答える 2

3 
angular.module('MyApp')
    .directive('canSave', function () {
        return function (scope, element, attrs) {
            var form = scope.$eval(attrs.canSave);

            scope.$watch(function() {
                return form.$dirty && form.$valid;
            }, function(value) {
                value = !!value;
                attrs.$set('disabled', !value);
            });
        }
    });

プランカー: http://plnkr.co/edit/0SyK8M

于 2013-09-04T22:38:40.217 に答える
2

次のように関数呼び出しをディレクティブに渡すことができます

function Ctrl($scope) {
    $scope.canSave = function () {
        return form.$dirty && form.$valid;
    };
}

app.directive('canSave', function () {
    return {
        scope: {
            canSave: '&'
        },
        link: function (scope, element, attrs) {
            attrs.$set('disabled', !scope.canSave());
        }
    }
});

これがテンプレートです

<div ng-app="myApp" ng-controller="Ctrl">
    <div can-save="canSave()">test</div>
</div>

関数がディレクティブから呼び出されていることがわかります。Demo

于 2013-09-04T22:41:18.970 に答える