无法将指令适用于两个不同的控制器在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

回答

相关问题