如何公开从element指令的行为呢？

问题描述

我跑进适应从溶液How揭露从指令的行为与孤立的范围是什么？。我想揭露我的指令，作为一个元素，而不是作为一个属性：

I ran into a problem adapting the solution from How to expose behavior from 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.

下面是code，以及：

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的：

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");
            }
        }
    };
});

这是使用以下AngularJS版本：

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?

推荐答案

我觉得你的错误只是来自你写的事实要求而不是在指令限制。 要求是要确保另一个指令是在相同的元素present，限制是定义的HTML结构你的指令。

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指令的行为呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！