$ http请求指令后，未呈现 [英] Directive not rendering after $http request

问题描述

我开始angularjs工作，有一个问题。

I began working with angularjs and have a problem.

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只是相关code：

$scope.search = function() {

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

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

directives.js（只是相关code）

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

我现在的问题是：
该ProductSearchService加载数据。但指令没有呈现预期。

My Problem now is: The ProductSearchService loads the data. But the directive not rendering as expected.

如果我从移动搜索results.html指令code到我的index.html像这样的：

If i move the directive code from search-results.html to my index.html like this:

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

evrything是很好的呈现。因此，我认为我包括我的指令错误或忘记一些重要的事情。

evrything is rendered nicely. So i think i included my directive wrongly or forgot something important.

我创建类似于我设置一个plunkr：

I've created a plunkr similar to my setup:

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

在一切工作正常。

在我的本地应用程序，我改变了以产品为list.html模型属性访问该

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

更新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在可以表明这个问题：
http://plnkr.co/edit/QgU1cf3JeJYKu6Fkl9zv?p=$p$pview

推荐答案

您没有设置任何scope属性到你的指令。
这意味着你的指令使用定义/载范围，因为该指令的范围。
因此，在产品list.html使用的范围是相同的由搜索result.html使用（并因此受到SearchController）之一。

You did not set any scope attribute to your directive. This means that your directive use the defining/containing scope as the directive own scope. Thus , the scope that is used in product-list.html is the same as the one used by search-result.html (and so by the SearchController).

的唯一原因，你可以有使用$如果指定的范围parent.items将是：{}，在你directive.You甚至可以测试它在你的plunker（我一样）。
你可以仔细检查指令scope属性？

The only reason , you could have to use the $parent.items would be if you specified scope:{}, in your directive.You can even test it in your plunker (I did). Can you double check the directive scope attribute ?

THX

这篇关于$ http请求指令后，未呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！