Angular.js綁定模型到指令

Question

我正在嘗試將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指令還是該方法錯誤？

Answer 1

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

Answer 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>

您可以看到從指令調用了該函數。 演示