如何在 angularjs 中访问其他人的指令？

Question

我对来自另一个人的指令访问有疑问，代码如下

app.module('myApp', [])
.directive('vikiQues', ['$http', '$compile', function($http, $compile){
return {
    restrict : 'E',
    scope : true,
    controller : [
        function (){
        }
    ],
    link : function(scope, iElement, iAttrs){
        $http.get('getOutside/1')
            .then(function(data){
                iElement.html($compile($(data.data))(scope));
                /*scope.addThere.find('div.please-wait').remove();
                scope.questionList.push({
                    text : '',
                    options : []
                });*/
            });
    }
};
}]).directive('vikiOption', ['$http', '$compile', function ($http, $compile) {
return {
    restrict: 'E',
    scope : true,
    require : '^vikiQues',
    link: function (scope, iElement, iAttrs, vikiQuesCtrl) {
        $http.get('getInside/1')
            .then(function(data){
                var _ = $(data.data);
                scope._opt = false;
                iElement.html($compile(_)(scope));
                if ( scope.$parent.questionList[scope.$parent.totalQuestionCount-1].options.length > 2)
                    _opt = true;
                scope.now = {
                    id : scope.$parent.questionList[scope.$parent.totalQuestionCount-1].options.length,
                    char : '',
                    text : '',
                    image : '',
                    removeable : scope._opt,
                };
                ques.now.options.push(scope.now);
            });
    }
};

}]);

我每次都收到这个错误：angular.min.js:117 Error: [$compile:ctreq] http://errors.angularjs.org/1.5.7/$compile/ctreq?p0=vikiQues&p1=vikiOption

那里有什么问题？

html代码：
0">
viki-ques 和 viki-option 是来自 php 的模板。 如果我删除 iElement.html($compile($(data.data))(范围)); 代码，我不能得到错误。我想我错了。 ithink $compile 或 scope 提供此错误。 （帮助）

Answer 1

你可以试试

require : 'vikiQues',

或者你应该改变

controller : [
        function (){
        }
    ],

到：

controller : function (){},

Answer 2

根据directives documentation (serach for Creating Directives that Communicate)，您需要像这样要求您的父指令：

.directive('vikiOption', function(){
  return {
      restrict : 'E',
      require: '^vikiQues',
      template: '<li>my items</li>',
      //templateUrl: 'url to html file with html from previous line',
      scope : true,
      link : function (scope, elem, attrs, ctrl){ console.log(ctrl); }
  };
});

字符 ^ 表示 Angular 将尝试在标记层次结构中找到所需的指令上层

你需要在你的 vikiQues 指令中有一个控制器，像这样声明它

.directive('vikiQues', function(){
  return {
      restrict : 'E',
      transclude: true, //attention here!!
      scope : true,
      template: '<ul ng-transclude>item x</ul>', //and here, now you can instert vikiOption inside
      controller : function (){ //pay attention no brackets
        this.myProp = 'foo';  
      }
  };
});

你的标记使用这个：

<viki-queues>
  <viki-option>can use ng-repet for viki-option<viki-option/>
  <viki-option>to display a list of them<viki-option/>
</viki-queues>

附： templateUrl 更方便，因为您可以将标记保存在单独的文件中，或者从 asp.net 或其他模板引擎中获取它，或者只是将它们作为常见的静态 html 文件提供服务

P.P.S 希望对你有帮助