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

Question

我正在使用 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. I am not able to use the directive again. I was able to recreate the issue I'm having, Fiddler 2 controllers link，一切正常。

据我了解，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>

Answer 1

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

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

我建议您尝试使该指令更通用且更易于使用，也许 post 一个 Github GIST，以便其他人能够轻松地使用 Tippy未来!!!!

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

Not able to apply a directive to two different controllers in AngularJS

html

javascript

angularjs

angularjs-directive

angularjs-templates