5

我正在尝试创建一个可以增强 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.

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

4

3 回答 3

6

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

于 2013-04-16T07:38:12.353 回答
3

您的指令示例非常基本，所以我看不出您想要实现什么。至少我可以说：您可以将新功能定义为范围的功能，例如

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

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

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

于 2013-04-16T07:23:28.857 回答
0

将这些方法添加到指令的一种方法是使指令成为控制器（也称为子视图）。控制器中的 $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>

于 2018-10-30T01:03:08.793 回答