$ http請求後不呈現指令

我開始使用angularjs並遇到問題。

app.js（只是有關路線）

$routeProvider.when('/search', {templateUrl: 'partials/search-results.html', controller: 'SearchController', title: 'Product Search'});

搜索results.html

<div product-list></div>

的index.html

<div class="page_content_offset p_bottom_0"> 
    <div class="container mh600"> 
     <div ng-view></div> 
    </div> 
</div>

產品list.html

<div ng-repeat="item in items"> 
    <p>{{item.address_components[0].long_name}}</p> 
    </div>

controller.js只是相關代碼：

$scope.search = function() { 

$scope.loading = true; 
$scope.items = {}; 

ProductSearchService.searchItems($scope.term).then(function(data) { 
    $scope.items = data; 
    $scope.loading = false; 
}); 
};

directives.js（只是相關的代碼）

directive('productList', function() { 
     return { 
      restrict: 'EA', 
      templateUrl: 'partials/list/product-list.html' 
     };

我的問題現在是： ProductSearchService加載數據。但該指令不按預期呈現。

如果我從搜索results.html指令代碼移到我的index.html像這樣：

<div class="page_content_offset p_bottom_0"> 
     <div class="container mh600"> 
     <div product-list></div> 
     <div class="clearfix"></div> 
     </div> 
</div>

evrything是很好的呈現。所以我認爲我錯誤地包含了我的指示或忘記了一些重要的東西。

我創建了一個plunkr類似我的設置：

http://plnkr.co/edit/60dvyFnz74yrsK12J2J4?p=preview

一切正常在。

在我的本地應用程序，我改變了這個

<div ng-repeat="item in $parent.items"> 
    <p>{{item.address_components[0].long_name}}</p> 
    </div>

更新「以產品爲list.html」模型屬性訪問controllers.js

angular.module('myApp.controllers', []) 
.controller('SearchController', ['$scope','$http','ProductSearchService', function($scope, $http, ProductSearchService) { 

       $scope.items = {}; 

       $scope.search = function() { 

        $scope.loading = true; 

        ProductSearchService.searchItems($scope.term).then(function(data) { 
         $scope.items = data; 
         $scope.loading = false; 
        }); 
       }; 
}]);

更新2： 我現在有一個plnkr問題可以顯示：

來源

2014-08-31 MadeOfSport

任何控制檯錯誤？ – V31 2014-08-31 12:45:47

沒有出現控制檯錯誤 – MadeOfSport 2014-08-31 13:00:20

你可以讓一個plnkr來演示這個問題嗎？ – 2014-08-31 13:45:45

你沒有任何作用域屬性設置爲你的指令。這意味着您的指令使用定義/包含範圍作爲指令自己的範圍。因此，product-list.html中使用的作用域與search-result.html所使用的作用域（以及SearchController所使用的作用域）相同。

唯一的原因是，如果您在指令中指定了範圍：{}，那麼您可能必須使用$ parent.items。您甚至可以在您的plunker中測試它（我做過）。你可以仔細檢查指令範圍屬性嗎？

Thx

來源

2014-09-01 13:18:27

嘿，我現在有一個工作plnkr，我可以顯示問題：http://plnkr.co/edit/QgU1cf3JeJYKu6Fkl9zv?p=preview 如果我刪除$ scope.items = {};聲明從我的SearchController範圍似乎是相同的，我不必使用$父。但即時通訊仍然困惑？ – MadeOfSport 2014-09-01 18:49:51

在您的plnkr中，您使用2個searchController：一個用於index.html（在body-ng = controller =「SearchController」中），另一個用於search-result.html（在您的$ routeProvider配置中）。但是你只能調用index.html的搜索函數（在ng-init =「init（）」中）。事實上，search-result.html的未初始化的scope.items值映射了被重視的scope.items定義index.html。請參閱我的[版本]（http://plnkr.co/edit/PgbhWo0odLSHa850zSFM?p=preview），並注意不要使用ng-init來初始化控制器（如[在此解釋]（http：/ /stackoverflow.com/a/15463124/1170805）） – 2014-09-02 07:25:55

非常有幫助。謝謝。 – MadeOfSport 2014-09-02 08:18:58

directive('productList', function() { 
    return { 
     restrict: 'EA', 
     replace: true, 
     templateUrl: '<section data-ng-include=" 'partials/list/product-list.html' "></section>' 

    }; 
});

試試這個作爲指令:)

來源

2014-08-31 14:45:45

我找到了一個可行的解決方案，但無法解釋爲什麼這會起作用。我將對模型proeprties的訪問權限從項目更改爲$ parent.items。現在它工作？ – MadeOfSport 2014-08-31 18:10:51

你有'product-list.html'的控制器嗎？ – 2014-09-01 03:59:57

是的，我有一個名爲SearchController的控制器。我已經更新我的問題，並寫下相關的代碼：更新controllers.js – MadeOfSport 2014-09-01 11:56:45

$ http請求後不呈現指令

回答

相關問題