2016-05-22 113 views
1

大家。我是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 
} 
}]) 

我无法获得价值scope.CTH。 ??

+0

给scope.CTH一个控制器的初始值,然后你会在指令的console.log中看到它。你现在看不到它的原因是它正在$ http成功函数中初始化,这是异步 –

+0

是的,如何得到它 – john

+0

@NitsanBaleli我不希望范围在指令和控制器之间共享。 – JeffryHouser

回答

0

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

您可以在指令上创建一个独立的作用域并将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> 
+1

如果你不定义一个独立的作用域,那么这个指令将默认从控制器继承。 http://plnkr.co/edit/PVdzZEQFDkM0J3917HAS?p=preview –

+0

在'$ http'完成之前,不能解决尝试登录到控制台的OP问题。链接初始化时仍然未定义 – charlietfl

+0

我想将CTH.length自定义分页我的列表 – john

0

当指令初始化时,scope.CTH尚未初始化,因为它的初始化的$ HTTP内accurses呼叫。

解决此问题的一种方法是从控制器中广播和发送事件并从指令中捕获它。看到这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); 
     }) 
    } 
    } 
}) 
1

有一个很简单的方法,看看有什么问题是:

在你的HTML,只是围绕着您的指令有NG,如果基于CTH条件:

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

就是这样。

这是做什么的,只有当CTH被设置为非空/非未定义,即$ http异步返回时,您的指令才会出生/实例化。有了这个,你的代码将工作。因此,当您只需使用Angular内置的“$ watch”时,就不需要观看或广播此类异步事件的简单序列化。

注1:我不知道你的架构是什么,也不是建议你需要做什么。我只是向你展示你的代码为什么不起作用以及你如何被陷入简单的异步陷阱。

注2:我假设你的指示是'as -is'。换句话说,您可以访问父级的范围(即控制者的范围)。如果您的指令的作用域是孤立的(即您在指令中定义了一个范围:{..(attrs)..}),您将不会对父范围具有“简单”访问权限。你的代码将会有所不同 - 例如,你可以将你的范围的一小部分传递给指令attrs。但是,ng-if仍然可以工作,因为它在控制器的范围内。

我希望这会有所帮助。

+1

创意解决方案;我测试了它,它对我来说工作得很好。 – JeffryHouser