Question

我正在创建一个类似于列表框的自定义指令。这是我的指令定义：

angular.module('Utilities')
    .directive('searchList', [
        function () {
            return {
                restrict: 'E',
                templateUrl: '/app/scripts/Utilities/search/search.html',
                controller: 'SearchCtrl',
                scope: {
                    itemsSource: '=',
                    itemTemplate: '@',
                    filterText: '=?',
                    selectedItem: '=?',
                }
            };
        }
    ]);

以下是我在视图中使用它的方法：

<search-list items-source="productsSource" 
             item-template="{{item.Name}} Selling for: {{item.Price}}"
             selected-item="selectedProduct" />

productsSource和selectedProduct都来自视图的范围（它们工作正常）。我希望item-template直接作为文本（我的视图使用的范围中没有项目对象）。

在SearchCtrl内我获取要在我的搜索列表中显示的项目，然后我想将item-template应用于每个项目（通过使用$compile服务）。

问题是SearchCtrl $scope.itemTemplate内部等于Selling for:（{{}}语法已解决，未作为文本传递）

TL;博士

我的search.html模板如下所示：

<li ng-repeat="item in itemsDataSource" ng-class-odd="'oddRow'" ng-class-even="'evenRow'">
    <div class="searchResultsItem" ng-click="onItemSelected(item)">
        <span compile="internalItemTemplate"></span>
    </div>
</li>

由于itemTemplate是单向绑定，SearchCtrl会将其重新分配给internalItemTemplate。

    if (typeof $scope.itemTemplate === 'undefined') {
        $scope.internalItemTemplate = '{{item}}';
    } else {
        $scope.internalItemTemplate = $scope.itemTemplate;
    }

span标记的编译指令来自：Angular Docs for $compile

看起来像这样：

angular.module('Utilities')
    .directive('compile', ['$compile',
        function ($compile) {
            // directive factory creates a link function
            return function (scope, element, attrs) {
                scope.$watch(
                  function (scope) {
                      // watch the 'compile' expression for changes
                      return scope.$eval(attrs.compile);
                  },
                  function (value) {
                      // when the 'compile' expression changes
                      // assign it into the current DOM
                      element.html(value);

                      // compile the new DOM and link it to the current
                      // scope.
                      // NOTE: we only compile .childNodes so that
                      // we don't get into infinite loop compiling ourselves
                      $compile(element.contents())(scope);
                  }
                );
            };
        }
    ]);

如果我将$scope.internalItemTemplate SearchCtrl中的'{{item.Name}} Selling for: {{item.Price}}'硬编码为{{}}，那么

如何让我的指令允许传递{{1}}而不试图解决它？

Answer 1

将范围类型从@更改为=，然后用引号括起来。

该指令如下所示：

angular.module('Utilities')
    .directive('searchList', [
        function () {
            return {
                restrict: 'E',
                templateUrl: '/app/scripts/Utilities/search/search.html',
                controller: 'SearchCtrl',
                scope: {
                    itemsSource: '=',
                    itemTemplate: '=',
                    filterText: '=?',
                    selectedItem: '=?',
                }
            };
        }
    ]);

并且视图看起来像这样：

<search-list items-source="productsSource" 
             item-template="'{{item.Name}} Selling for: {{item.Price}}'"
             selected-item="selectedProduct" />

如何将绑定表达式作为文本传递到指令隔离范围？

1 个答案: