Angular.js 绑定模型到指令答案

【问题标题】：Angular.js binding model to directiveAngular.js 绑定模型到指令
【发布时间】：2013-09-04 22:26:22
【问题描述】：

我正在尝试组合一个 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 指令，还是那也是错误的方法？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案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);
            });
        }
    });

Plunker：http://plnkr.co/edit/0SyK8M

【讨论】：

【解决方案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

【讨论】：

感谢您的回答！会像这样工作，但试图从需要的控制器中删除。