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

问题描述

我开始使用 angularjs 时遇到了问题.

app.js(只是相关的路由)

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

search-results.html

index.html

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

product-list.html

<p>{{item.address_components[0].long_name}}</p>

controller.js 只是相关代码:

$scope.search = function() {$scope.loading = true;$scope.items = {};ProductSearchService.searchItems($scope.term).then(function(data) {$scope.items = 数据；$scope.loading = false;});};

directives.js(只是相关代码)

directive('productList', function() {返回 {限制:'EA'，templateUrl: 'partials/list/product-list.html'};

我现在的问题是:ProductSearchService 加载数据.但该指令未按预期呈现.

如果我像这样将指令代码从 search-results.html 移动到我的 index.html:

 
<div class="container mh600"><div 产品列表></div><div class="clearfix"></div>

一切都很好地呈现.所以我想我错误地包含了我的指令或忘记了一些重要的东西.

我创建了一个类似于我的设置的 plunkr:

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

一切正常.

在我的本地应用程序中，我更改了product-list.html"模型属性访问权限

<p>{{item.address_components[0].long_name}}</p>

更新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 = 数据；$scope.loading = false;});};}]);

更新 2:我现在有一个 plnkr 可以显示问题:http://plnkr.co/edit/QgU1cf3JeJYKu6Fkl9zv?p=preview

解决方案

您没有为指令设置任何范围属性.这意味着您的指令使用定义/包含范围作为指令自己的范围.因此，product-list.html 中使用的范围与 search-result.html 使用的范围相同(SearchController 也是如此).

唯一的原因，你可能不得不使用 $parent.items 是如果你在你的指令中指定了 scope:{}，你甚至可以在你的 plunker 中测试它(我做到了).你能仔细检查指令范围属性吗?

谢谢

I began working with angularjs and have a problem.

app.js (just the relevant route)

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

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>

product-list.html

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

controller.js just relevant code:

$scope.search = function() {

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

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

directives.js (just relevant code)

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

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

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 is rendered nicely. So i think i included my directive wrongly or forgot something important.

I've created a plunkr similar to my setup:

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

Everything works fine in that.

In my local application i changed the "product-list.html" model property access to this

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

Update 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;
                    });
                };
}]);

Update 2: I now have a plnkr where the problem can be shown: http://plnkr.co/edit/QgU1cf3JeJYKu6Fkl9zv?p=preview

解决方案

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).

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屋！