无法将指令应用于 AngularJS 中的两个不同控制器答案

【问题标题】：Not able to apply a directive to two different controllers in AngularJS无法将指令应用于 AngularJS 中的两个不同控制器
【发布时间】：2017-08-29 17:55:27
【问题描述】：

Fiddler link

我正在使用Tippy library 创建一个 HTML 工具提示。我制定了 2 个指令来处理提示工具提示。

.directive('settings', function() {
    return {
      templateUrl: 'tippy-template.html'
    };
  })
  .directive('tippy', function() {
    return function (scope) {
      tippy('.tippy', {
           position: 'bottom',
           animation: 'shift',
           arrow: true,
           interactive: true,
           arrowSize: 'big',
           distance: 20,
           html: document.getElementById('setting-template'),
           appendTo: document.getElementById('settings-controller')
      })
    };
  })

settings 指令包含 HTML 工具提示代码，tippy 指令将放置在 HTML 工具提示代码中以激活它。 tippy 工具与其所在的控制器共享数据，在本例中它共享缓存。

如果只有一个 tippy Fiddler 1 controller 实例，则一切正常。我无法再次使用该指令。我能够重现我遇到的问题Fiddler 2 controllers link。

据我了解，Tippy 只能在有唯一 id 的情况下使用。有没有办法解决这个问题？

tippy-template.html

<div id="setting-template" tippy>
   <ul class="collection">
     <li class="collection-item">
       <div class="col-title"><b>{{title}}</b></div>
       <div class="col-title">Cache</div>
       <div class="col-item">
         <div class="switch">
           <label>Off
                <input ng-model="cache" type="checkbox"><span class="lever"></span> On
           </label>
         </div>
       </div>
     </li>
     <li class="collection-item">
       <div class="col-title"><b>Cache Result</b></div>
       <div class="col-item">{{cache}}</div>
    </li>
  </ul>
</div>

指令用法（在控制器内）

<div id="settings-controller" settings></div>

【问题讨论】：

一个问题需要我们自己来解决，添加tippy-template.html和你的指令用法示例。就目前而言，我唯一能说的是你的指令中不应该有 document.getElementById()。
@Walfrat 更新（提琴手也包含它们），需要给 Tippy 一个 ID 才能使用模板，如果没有，它只是在控制器上输出 html。
这不是我在这里看到的，你给他一个 HTMLElement，document.getElementById() 不返回 Id，它返回与 id 匹配的 HTML 对象。使用该指令，您可以注入元素对象，因此您可以获得使用该指令的对象的 id。最后，将一个 id 放入多次使用的模板中是行不通的，因为您最终会在 html 上获得多个 id
哦，是的，我的错，Old question 使用document.getElementById() 的原因，它没有呈现范围内容。

标签： javascript html angularjs angularjs-directive angularjs-templates

【解决方案1】：

在对自己做错的事情绞尽脑汁之后，我终于找到了解决方案。你基本上需要为类创建一个唯一的 ID (.tippy)，我基本上直接使用了元素，你说它需要 document.getElementById() 才能工作，但 $element[0] 做同样的事情。通过在控制台中记录两个输出来解决这个问题。无论如何，请检查下面的解决方案。

JSFiddle Demo

HTML：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
  rel="stylesheet">
<body ng-app="myapp">
   <div class="row">
     <!-- CONTROLLER 2-->
     <div class="col s12 m6" ng-controller="controller1">
        <div class="card fill1">
           <div class="card-content">
              <span class="card-title">{{title}}</span>
              <i class="material-icons tippy c-pointer" data-theme="light" data-trigger="click" data-interactive="true" data-animatefill="false" data-arrow="true">settings</i>
              <div id="settings-controller2" parent="tippy" settings></div>
              <div class="filler"></div>
              Cache is : <b>{{cache}}</b>
           </div>
        </div>
     </div>

     <!-- CONTROLLER 2-->
     <div class="col s12 m6" ng-controller="controller2">
        <div class="card">
           <div class="card-content">
              <span class="card-title">{{title}}</span>
              <i class="material-icons tippy2 c-pointer" data-theme="light" data-trigger="click" data-interactive="true" data-animatefill="false" data-arrow="true">settings</i>
              <div id="settings-controller" parent="tippy2" settings></div>
                 <div class="filler"></div>
                 Cache is : <b>{{cache}}</b>
           </div>
        </div>
     </div>
  </div>
   <script type="text/ng-template" id="tippy-template.html">
      <div id="setting-template" tippy>
                <ul class="collection">
            <li class="collection-item">
            <div class="col-title"><b>{{title}}</b></div>
            <div class="col-title">Cache</div>
            <div class="col-item">
                <div class="switch">
                <label>Off
                                <input ng-model="cache" type="checkbox"><span class="lever"></span>
                On</label>
              </div>
            </div>
           </li>
           <li class="collection-item">
            <div class="col-title"><b>Cache Result</b></div>
                <div class="col-item">{{cache}}</div>
           </li>
          </ul>
         </div>
    </script>
</body>

JS：

var myapp = angular.module('myapp', [])

.directive('settings', function() {
    return {
      templateUrl: 'tippy-template.html',
      controller: function($scope, $element, $attrs){
        $scope.parent = $element;
        $scope.tippyClass = $attrs.parent;
      }
    };
  })
  .directive('tippy', function() {
    return {
      controller: function ($attrs, $scope, $element) {
      console.log($attrs.id);
          tippy('.'+$scope.tippyClass, {
           position: 'bottom',
           animation: 'shift',
           arrow: true,
           interactive: true,
           arrowSize: 'big',
           distance: 20,
           html: $element[0],
           appendTo: $scope.parent[0]
          })
        }
      };
  })
  .controller('controller2', function($scope) {
    $scope.title = "Controller 2";
    $scope.cache = true;
  })
  .controller('controller1', function($scope) {
    $scope.title = "Controller 1";
    $scope.cache = false;
  });

我建议您尝试使该指令更通用和易于使用，并可能发布一个 Github GIST，以便其他人将来能够轻松使用Tippy！！！！

【讨论】：

注意：第一个元素或者tippy函数也可以是DOM元素。
非常感谢，我试图做类似的事情但失败了。所以我只做了多个小费。你救了我:)
@Shank 进一步改进此代码并制作 GIST，它对您和其他人都有好处，不客气！！！！