Question

我有一个指令，其控制器对端点进行$ http调用。我想获取该服务器调用的结果，然后在我的模板中显示它们。如果我的模板中有一个值，然后明确设置它，一切正常。如果我尝试将模板绑定到服务器调用，那么我得到上面提到的错误。我需要使用$ 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

以下是您的指令的重构版本。由于您使用的是controllerAs，因此可以完全删除对$scope的引用。此外，变量ctrl被创建为控制器的别名，以便从回调函数内部一致地访问控制器。最后，link功能已移除，template已调整为引用ctrl而不是this。

错误

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

是在模板中使用this的结果，它指的是DOM而不是控制器，与$compile一起使用，基本上将DOM编译为自身。

＆＃13;

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>'
  };
}

＆＃13;

请注意，此代码尚未经过测试。

angular1 - angular.js：11655 RangeError：超出最大调用堆栈大小

1 个答案: