Question

大家。我是AngularJS的新手，发现它非常有趣，但我对以下情况有点不清楚。

 app.controller("myCtrl", ['$scope', '$http', '$filter', function ($scope, http, filter)
    {
        $http({
            method: CTHocUri,
            url: 'get',
            async: true,
        }).then(function (response) {
            $scope.CTH = response.data; //response.data=two Object  
        })
    }])

app.directive("myCustom1",['$http', function ($compile,$http) {
    return {
        link: function (scope, element, attr) {
       console.log(scope.CTH); // I can't get... scope.CTH=undefined
 }
}])

我无法获得价值范围.CTH。 ??

Answer 1

有一种非常简单的方法可以看出问题所在：

在你的html中，只用基于CTH的ng-if条件包围你的指令：

<span ng-if="CTH">
   <my-custom-1></my-custom-1>
</span>

那就是它。

这样做的是，当CTH设置为非null /非undefined时，即$ http异步返回时，您的指令才会生成/实例化。有了这个，您的代码将起作用。因此，当您可以简单地利用Angular的内置“手表”时，无需观看或广播此类异步事件的简单序列化。

注1：我不知道您的架构是什么，我不建议您需要做什么。我只是告诉你为什么你的代码不会工作以及你是如何陷入一个简单的异步性陷阱。

注2：我认为你的指令是＆＃39; as -is＆＃39;。换句话说，您可以访问父级的范围（即控制器的范围）。如果你的指令的范围是孤立的（即你有一个范围：{..（attrs）..}在指令中定义）你就不会有简单的＆＃39;访问父范围。您的代码将有所不同 - 例如，您可以将范围的一些部分传递给指令attrs。但是，ng-if仍然有效，因为它位于控制器的范围内。

我希望这会有所帮助。

Answer 2

指令和控制器是两个完全不同的实体。如果它有帮助你可以将它们视为不同的类。他们不会共享相同的范围。

您可以在指令上创建一个隔离的范围，并将CTH变量传递给它。概念上是这样的：

app.directive("myCustom1",['$http', function ($compile,$http) {
    return {
       scope { cth : "=" },
        link: function (scope, element, attr) {
       console.log(scope.cth); 
 }

然后在您的HTML中，执行以下操作：

<div ng-controller="myCtrl">
<my-Custom1 cth="CTH">
</div>

Answer 3

当指令初始化时，scope.CTH仍未初始化，因为它的初始化会在$ http调用内进行控制。

克服这个问题的一种方法是从控制器广播和事件，并从指令内部捕获它。请参阅此plnkr和angularjs范围的docs

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.name = 'World';

  $timeout(function() {
    $scope.test = "test";
    $scope.$broadcast('MyEvent')
  }, 500);
});


app.directive('test', function() {
  return {
    link: function(scope, elm, attr) {
      scope.$on('MyEvent', function() {
        console.log(scope.test);
      })
    }
  }
})

在指令中获取范围

3 个答案: