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错误：[$ compile：ctreq] http://errors.angularjs.org/1.5.7/ $ compile / ctreq？p0 = vikiQues＆amp; p1 = vikiOption

那里有什么问题？

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

Answer 1

你可以尝试

require : 'vikiQues',

或者你应该改变

controller : [
        function (){
        }
    ],

为：

controller : function (){},

Answer 2

根据directives documentation（创建通信指令的搜索），您需要这样的父指令：

.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>

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

P.P.S希望这有帮助

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

2 个答案: