角度1 - 角度.js：11655 范围错误：超出最大调用堆栈大小

Question

我有一个指令，它有一个对endpoint进行$超文本传输协议调用的控制器。我想获取服务器调用的结果，然后将它们显示在我的模板中。如果我的模板中有一个值，然后显式设置它，它就可以正常工作。如果我尝试将模板绑定到服务器调用，则会出现上面提到的错误。我需要使用$compile服务才能正常工作吗？

提前致谢

编译的最终结果

function mydirective(myservice,$compile) {

    return {
        restrict: 'ACE',
        scope: {
            url: '=',
            title: '=',
        },

        controllerAs: 'ctrl',
        bindToController: true,
        controller: ['$scope', function($scope) {
            myservice.init('http://jsonplaceholder.typicode.com/posts')
                .then(function(data) {
                    $scope.postRequest(data);
                });
            $scope.postRequest = function(val) {
                this.items = val;
                this.title = val[0].title;
            };
        }],
        link: function ($scope, $el, $attr  ) {

            var template = '<div class=\"test\">{{this.title}}</div>' +
                '<div class=\"tes\" ng-repeat=\"item in this.items\">'+
                '<div class=\"test1\">{{item.title}}</div>'+
                '</div>';

            var e = $compile(template)($scope);
            $el.after(e);
        }
    };
}

Answer 1

下面是指令的重构版本。由于您使用的是控制器 As，因此可以完全删除对$scope的引用。此外，还会创建一个变量 ctrl 作为控制器的别名，以便从回调函数内部一致地访问控制器。最后，删除了链接函数，并且模板已调整为引用 ctrl 而不是此。

错误

RangeError：超出最大调用堆栈大小

是在模板中使用< code>this的结果，它指的是DOM而不是控制器，与< code>$compile结合使用，实质上是将DOM编译成它自己。

function mydirective(myservice, $compile) {

  return {
    restrict: 'ACE',
    scope: {
      url: '=',
      title: '=',
    },
    controllerAs: 'ctrl',
    bindToController: true,
    controller: function() {
      var ctrl = this; //alias reference for use inside controller callbacks
      myservice.init('http://jsonplaceholder.typicode.com/posts')
        .then(function(data) {
          ctrl.postRequest(data);
        });
      ctrl.postRequest = function(val) {
        ctrl.items = val;
        ctrl.title = val[0].title;
      };
    },
    template: '<div class=\"test\">{{ctrl.title}}</div>' +
      '<div class=\"tes\" ng-repeat=\"item in ctrl.items\">' +
      '<div class=\"test1\">{{item.title}}</div>' +
      '</div>'
  };
}