Question

我认为我有依赖注入的问题，但我有点迷失。

在我的控制器中，我从服务器获取一些数据并将其放入$ scope变量中。在我的指令中，我有一个包含$ scope变量上的观察者的链接，回调创建了图表和表格。这在我只想显示图表的地方工作正常。我遇到的问题是当我想要代码生成可变数量的表（基于所接收数据的内容）并将它们封装在bootstrap-ui的手风琴中时。这意味着我必须在链接结束时调用$ compile。只要我代码生成一些范围内容（{{var}}）或标准角度指令（ng-repeat），它就可以工作但是当我尝试使用accordion指令并编译它时，我会得到这些错误：

Error: [$compile:ctreq] http://errors.angularjs.org/1.2.21/$compile/ctreq?p0=accordionGroup&p1=accordionTransclude
        at Error (native)
        at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:6:450
        at L (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:51:216)
        at M (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:54:244)
        at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:47:135)
        at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:47:152)
        at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:47:152)
        at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:47:152)
        at M (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:54:149)
        at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:47:135) <a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"> angular.js:10023
        2014-08-21 16:36:51.433
        Error: [ngTransclude:orphan] http://errors.angularjs.org/1.2.21/ngTransclude/orphan?p0=%3Cdivlass%3D%22panel-body%22%20ng-transclude%3D%22%22%3E
        at Error (native)
        at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:6:450
        at xa.link (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:203:112)
        at M (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:54:208)
        at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:47:135)
        at M (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:54:149)
        at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:47:135)
        at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:47:152)
        at M (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:54:149)
        at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:47:135) angular.js:10023
        2014-08-21 16:36:51.435
        Error: [ngTransclude:orphan] http://errors.angularjs.org/1.2.21/ngTransclude/orphan?p0=%3Cdivlass%3D%22panel-group%20ng-scope%22%20ng-transclude%3D%22%22%3E
        at Error (native)
        at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:6:450
        at xa.link (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:203:112)
        at M (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:54:208)
        at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:47:135)
        at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:46:258
        at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:48:97
        at w (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:51:389)
        at xa.link (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:203:129)
        at M (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:54:208)

只要该指令出现在我的元素中（代码添加或在html模板中）并且我编译元素，就会出现这些错误。

我想这与我没有注入angular-ui有关，但我不知道怎么做。

我创建了2个示例，我发现了一个奇怪的行为：在第一个场景中（没有$ watch），它编译没有任何错误，但内容不显示。在第二个（带有$ watch）它给出了我所遇到的相同错误（我认为这是回调范围的一些问题，但我有点迷失）

有谁知道我做错了什么？

谢谢！

http://plnkr.co/edit/2vXc6KMZgk5rEkLVOQFA?p=preview

http://plnkr.co/edit/7z5V9k4F1uT4HQJPcr01?p=preview

示例如下所示：

angular.module('docsBindExample', ['ui.bootstrap'])
.controller('Controller', ['$scope',  function($scope) {
  setTimeout(function(){ $scope.loop = true; $scope.$apply();}, 2000);

}])
.directive('test', ['$compile',  function($compile) {
  return {
      restrict: 'A',
      link: link
  };

  function link($scope, $elem, $attr)
  {
    $scope.$watch('loop', function ()
    {
      if ($scope.loop)
      {
        console.log($scope.loop);
        $scope.loop = false;
        $elem = $compile($elem)($scope);
      }
    });
  }

}]);

Answer 1

您可以只定位要编译的元素。

        var div = $elem.children()[1]
        $elem = $compile(div)($scope);

Modified Plunker

$在指令中从bootstrap-ui编译一个指令

1 个答案: