無法將指令應用於AngularJS中的兩個不同的控制器

Question

我正在使用Tippy庫來創建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控制器實例，一切都會正常進行。 我無法再次使用該指令。 Fiddler 2 controllers link能夠重現我遇到的問題。

據我了解， Tippy僅在具有唯一ID的情況下可以使用。 有辦法解決嗎？

毛尖，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

在為自己做錯的事情絞盡腦汁之后，我終於找到了解決方案。 您基本上需要為該類（ .tippy ）創建一個唯一的ID，並且我基本上是直接使用這些元素的，您是在說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 ！

無法將指令應用於AngularJS中的兩個不同的控制器

問題描述

1 個解決方案

解決方案1
1 已采納 2017-08-29 19:23:56

無法將指令應用於AngularJS中的兩個不同的控制器

問題描述

1 個解決方案

解決方案1 1 已采納 2017-08-29 19:23:56

解決方案1
1 已采納 2017-08-29 19:23:56