Question

我的控制器中有一个cancel函数，我希望传递或绑定到指令。此功能基本上清除了表单。像这样：

app.controller('MyCtrl', ['$scope', function($scope){

    var self = this;

    self.cancel = function(){...
        $scope.formName.$setPristine();
    };
}]);

app.directive('customDirective', function() {

    return {
        restrict: 'E'
        scope: {
            cancel : '&onCancel'
        },
        templateUrl: 'form.html'
    };
});

form.html

<div>
    <form name="formName">

    </form>
</div>

但是，$ setPristine（）不起作用，因为控制器无法访问表单DOM。是否可以在指令中扩展控制器cancel的功能，以便我添加$setPristine()？

有人建议使用jQuery来选择表单DOM，（如果这是唯一的方法）如何完全这样做？是否有更多Angular方式来做这件事？

Answer 1

由于<form>在指令内，控制器应该与它无关。知道它会破坏封装，即从指令泄漏实现细节到控制器。

一种可能的解决方案是通过一个空的＆＃34;持有者＆＃34;对象指令，让指令用回调函数填充它。即：

app.controller('MyCtrl', ['$scope', function($scope) {
    var self = this;
    $scope.callbacks = {};

    self.cancel = function() {
        if( angular.isFunction($scope.callbacks.cancel) ) {
            $scope.callbacks.cancel();
        }
    };
});

app.directive('customDirective', function() {
    return {
        restrict: 'E'
        scope: {
            callbacks: '='
        },
        templateUrl: 'form.html',
        link: function(scope) {
            scope.callbacks.cancel = function() {
                scope.formName.$setPristine();
            };

            scope.$on('$destroy', function() {
                delete scope.callbacks.cancel;
            });
        }
    };
});

将其用作：

<custom-directive callbacks="callbacks"></custom-directive>

我不确定我对此感到满意，不过......

在指令中扩展控制器功能

1 个答案: