Question

尝试实现一个可以从其grid-url指令读取URL参数的表。稍后，这个将提供给控制器中的$http。然而，它似乎没有按预期工作。该值始终未定义。

这是标记：

<table class="table table-striped" grid-url="http://localhost/records/all">
  ...
</table>

以下是相关的初始化代码段：

app.directive('gridUrl', function(){
    return {
        replace: true,
        link: function(scope, element, attrs){
            // Add the gridUrl property to the scope
            scope.gridUrl = attrs.gridUrl;
        }
    }
});

app.controller('Ctrl', function($scope){
    // Expect to get http://localhost/records/all, but get undefined instead
    console.log($scope.gridUrl);
});

它看起来好像是范围隔离的问题。在控制器本身中调用console.log($scope)时，最奇怪的是我可以看到$scope.gridUrl有http://localhost/records/all。

那么是什么导致属性gridUrl在控制器中未定义？

Answer 1

您可以使用服务在模块之间共享数据：

    app.factory('SharedService', function() {
      return {
        sharedObject: {
          value: ''
        }
      };
    });`

Answer 2

首先定义控制器。所以在范围内没有属性gridUrl。您必须使用共享服务将指令注入控制器。

Answer 3

这是因为首先调用控制器，然后编译指令。因此，gridUri值落在范围内，但在控制器调用之后几个周期。

要证明您可以在模板中输出此变量：

<table class="table table-striped" grid-url="http://localhost/records/all">
  test :: {{ gridUrl }}
</table>

登录控制台后，它将显示以及$ scope中的属性。（当它是一个对象时，它会在控制台中更新）

根据您需要变量的内容，您可以将监视器置于其上，以便在作用域中出现时触发某些操作，或者您可以重新设计提供数据的方式（例如，添加一些共享的UI模型服务）

Answer 4

您应该在控制器中定义gridUrl，然后将其与您的指令绑定：

<div ng-controller="Ctrl" ng-init="$scope.gridUrlAttr = 'http://localhost/records/all'">
    <table class="table table-striped" grid-url-attr="$scope.gridUrlAttr">
        ...
    </table>
</div>

app.directive('gridUrl', function(){
    return {
        replace: true,
        scope: {
            gridUrlAttr: "="
        },
        link: function(scope, element, attrs){
            // Add the gridUrl property to the scope
            console.log(scope.gridUrlAttr);
            // here you can change the gridUrlAttr value
        }
    }
});

app.controller('Ctrl', function($scope){
    // Expect to get http://localhost/records/all, but get undefined instead
    console.log($scope.gridUrlAttr);
});

Answer 5

找到使其成为可能的方法，同时保持结构相同。这里的诀窍是使用$timeout服务10毫秒。

app.controller('Ctrl', function($scope, $timeout){
  $timeout(function(){
     // Getting http://localhost/records/all as expected
     console.log($scope.gridUrl);
  }, 10);

});

无法读取控制器

5 个答案: