2016-05-22 159 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