如何从 Element 指令公开行为?

问题描述

我在调整 How to从具有隔离作用域的指令公开行为?.我想将我的指令公开为元素而不是属性:

这是一个 JSFiddle.当您单击第一个使用属性方法的按钮时，一切正常.但是第二个按钮使用了 Element 方法，它给出了一个错误.

代码如下:

HTML:

<div ng-controller="MyCtrl">点击第一个按钮，一切正常:<br><button ng-click="callFnInAttribute()">属性指令中的调用函数</button>
{{errorViaAttribute}}<div my-attribute my-fn-via-attribute="fnInCtrlViaAttribute"></div><br><br>但是单击第二个按钮，您会收到错误消息:<br><button ng-click="callFnInElement()">元素指令中的调用函数</button>
{{errorViaElement}}<my-element my-fn-via-element="fnInCtrlViaElement"></my-element><br><br>唯一的区别是所使用的指令类型.为什么它适用于 Attribute 类型的指令而不适用于 Element 指令?</div>

JavaScript:

angular.module("main", []).controller("MyCtrl", function ($scope) {$scope.callFnInAttribute = 函数 () {尝试 {$scope.fnInCtrlViaAttribute();$scope.errorViaAttribute = "OK";} 捕捉(错误){$scope.errorViaAttribute = "错误:" + anError;}};$scope.callFnInElement = 函数 () {尝试 {$scope.fnInCtrlViaElement();$scope.errorViaElement = "OK";} 捕捉(错误){$scope.errorViaElement = "错误:" + anError;}};}).directive("myAttribute", function () {返回 {要求:'A'，范围: {myFnViaAttribute: '='},controllerAs: 'chartCtrl',bindToController: 真，控制器:函数($scope){$scope.myFnViaAttribute = 函数 () {console.log("myFnViaAttribute 被调用");}}};}).directive("myElement", function () {返回 {要求:'E'，范围: {myFnViaElement: '='},controllerAs: 'chartCtrl',bindToController: 真，控制器:函数($scope){$scope.myFnViaElement = 函数 () {console.log("myFnViaElement 被调用");}}};});

这是使用以下 AngularJS 版本:https://code.angularjs.org/1.1.0/angular.min.js

如何正确公开元素的行为?

解决方案

我认为您的错误仅仅是因为您在指令中编写了 require 而不是 restrict.require 是确保同一元素中存在另一个指令，restrict 是定义指令的 HTML 结构.

.directive("myAttribute", function () {返回 {限制:'A'，//<-- 而不是要求"范围: {myFnViaAttribute: '='},controllerAs: 'chartCtrl',bindToController: 真，控制器:函数($scope){$scope.myFnViaAttribute = 函数 () {console.log("myFnViaAttribute 被调用");}}};})

I ran into a problem adapting the solution from How to expose behavior from a directive with isolated scope?. I wanted to expose my directive as an Element rather than as an Attribute:

Here's a JSFiddle. When you click the first button, which uses the Attribute approach, everything is ok. But the second button uses the Element approach and it gives an error.

Here is the code as well:

HTML:

<div ng-app="main">
    <div ng-controller="MyCtrl">Click the first button and everything is ok:
        <br>
        <button ng-click="callFnInAttribute()">Call Function in Attribute Directive</button>
        <br>{{errorViaAttribute}}
        <div my-attribute my-fn-via-attribute="fnInCtrlViaAttribute"></div>
        <br>
        <br>But click the second button and you get an error:
        <br>
        <button ng-click="callFnInElement()">Call Function in Element Directive</button>
        <br>{{errorViaElement}}
        <my-element my-fn-via-element="fnInCtrlViaElement"></my-element>
        <br>
        <br>The only difference is the type of directive used. Why does it work with an Attribute type of directive but not with an Element directive?</div>
</div>

JavaScript:

angular.module("main", []).controller("MyCtrl", function ($scope) {
    $scope.callFnInAttribute = function () {
        try {
            $scope.fnInCtrlViaAttribute();
            $scope.errorViaAttribute = "OK";
        } catch (anError) {
            $scope.errorViaAttribute = "Error: " + anError;
        }
    };

    $scope.callFnInElement = function () {
        try {
            $scope.fnInCtrlViaElement();
            $scope.errorViaElement = "OK";
        } catch (anError) {
            $scope.errorViaElement = "Error: " + anError;
        }
    };
}).directive("myAttribute", function () {
    return {
        require: 'A',
        scope: {
            myFnViaAttribute: '='
        },
        controllerAs: 'chartCtrl',
        bindToController: true,
        controller: function ($scope) {
            $scope.myFnViaAttribute = function () {
                console.log("myFnViaAttribute called");
            }
        }
    };
}).directive("myElement", function () {
    return {
        require: 'E',
        scope: {
            myFnViaElement: '='
        },
        controllerAs: 'chartCtrl',
        bindToController: true,
        controller: function ($scope) {
            $scope.myFnViaElement = function () {
                console.log("myFnViaElement called");
            }
        }
    };
});

This is using the following AngularJS version: https://code.angularjs.org/1.1.0/angular.min.js

How do I correctly expose the behavior from an Element?

解决方案

I think your error simply comes from the fact that you wrote require instead of restrict in your directives. require is to make sure another directive is present in the same element, restrict is to define the HTML structure of your directive.

.directive("myAttribute", function () {
  return {
    restrict: 'A', // <-- and not "require"
    scope: {
      myFnViaAttribute: '='
    },
    controllerAs: 'chartCtrl',
    bindToController: true,
    controller: function ($scope) {
      $scope.myFnViaAttribute = function () {
        console.log("myFnViaAttribute called");
      }
    }
  };
})

这篇关于如何从 Element 指令公开行为?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！