Question

我开始使用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加载数据。但该指令未按预期呈现。

如果我将指令代码从search-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

一切都很好。

在我的本地应用程序中，我更改了＆＃34; product-list.html＆＃34;模型属性访问此

<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=preview

Answer 1

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

唯一的原因，你可能必须使用$ parent.items，如果你在你的指令中指定范围：{}。你甚至可以在你的plunker中测试它（我做过）。你能仔细检查指令范围属性吗？

THX

Answer 2

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

    };
});

尝试将此作为指令：）

$ http请求后无法呈现指令

2 个答案: