Question

我正在尝试创建一个可以增强HTML元素的指令。所以我设法让指令运行并与元素相关联我的当前代码是这样的：

angular.module('myModule', [])

    .directive('myDirective', function() {
        return {
            restrict: 'C',
            replace: false,
            scope: {},
            link: function(scope, element, attrs) {

            }
        }
    });

现在我想为HTML元素添加新方法，例如我想这样做：

// Pseudo code
myElement.reset();
myElement.reload(); // etc.

将这些方法添加到指令的最佳方法是什么？

Answer 1

向元素添加新方法不是Angular方式。角度方式是使用字段创建对象，将其传递给指令并监视指令内的字段更改。这是一个简单的例子：http://plnkr.co/edit/5v5mN69Bu18jpnoGwYqj?p=preview

Answer 2

你的指令示例非常基础，所以我看不出你想要达到的目标。至少我可以说：你可以将新功能定义为范围的功能，例如

...
link: function(scope, element, attrs) {
    scope.reset = function() {
         // reset something
    }
    // ...
}

如果要访问作用域中加载的数据（例如，用于函数reload（）），则应编写一个控制器以供此用途。因此您可以将服务注入为数据源。实现直接绑定到元素的函数更多的是jQuery方法，而不是angularjs方法。在angularjs中，你主要使用范围。

也许您最好使用jsfiddle或plnkr提供更完整的示例，我认为更容易帮助您将用例或问题视为一段工作代码。

Answer 3

将这些方法添加到指令中的一种方法是使指令成为控制器（又称为子视图）。控制器中的$ scope参数将使您可以双向访问模板中的HTML：

例如：

.directive("myDirective", function() {

var controller = ['$scope', function teamCountCtrl ($scope)
{
    $scope.reset = function() {
       // modify $scope.obj
    };

    $scope.reload = function() {
       // modify $scope.obj
    };
}];

return {
    replace: true,
    templateUrl: 'js/directives/teamCount.html',
    scope: {
        obj: '='
    },
    controller: controller
}});

然后在模板HTML中，您可以调用reset（）或reload（）：

<div>

<a tabindex=-1 class="btn" href="#" ng-click="reset()">
    <i class="fa fa-fw"></i>
</a>

<a tabindex=-1 class="btn" href="#" ng-click="reload()">
    <i class="fa fa-fw"></i>
</a>

向Angular指令添加方法？

3 个答案: