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

我使用Tippy library創建HTML工具提示。我做了2條指令來處理tippy工具提示。

.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工具與它所在的控制器共享數據，在本例中它共享緩存。

如果只有一個tippyFiddler 1 controller的實例，一切正常。我無法再使用該指令。我能夠重新創建我遇到的問題，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>

來源

2017-08-29 Shank

有一個問題需要我們自己來解決，請添加tippy-template.html和您的指令用法示例。就目前而言，我唯一能說的是，你的指令中不應該有document.getElementById（）。 – Walfrat

@Walfrat更新（提琴手同樣包含他們），Tippy需要給予一個ID來使用模板，如果不是，它只是輸出控制器上的html。 – Shank

這不是我在這裏看到的，你給他一個HTMLElement，document.getElementById（）不返回一個Id，它返回匹配id的HTML對象。使用該指令，您可以注入元素對象，以便您可以獲取使用該指令的對象的ID。最後，在一個模板使用多個時間的ID只是不能工作，因爲你將結束與多個id在html – Walfrat

發泄對我在做什麼錯了我的大腦，我終於得到了解決。你基本上需要爲這個類創建一個唯一的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讓其他人可以使用eas ily在未來！

來源

2017-08-29 19:23:56

注意：第一個元素或者tippy函數也可以是DOM元素。 – Walfrat

非常感謝你，我試圖做那樣的事情，但失敗了。所以我只做了多個tippys。你救了我:) – Shank

@Shank完善這個代碼，做一個GIST，它對你和其他人好，不客氣！ –

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

回答

相關問題