AngularJS-如何用变量渲染部分？

Question

例如，我在中有一个局部car-list.html，我想在几个地方使用不同的汽车集合来渲染它。也许是这样的：

<h1>All New Cars</h1>
<div ng-include="car-list.html" ng-data-cars="allCars | onlyNew"></div>

<h1>All Toyotas</h1>
<div ng-include="car-list.html" ng-data-cars="allCars | make:toyota"></div>

与常规包含项的主要区别在于，部分显示项不需要了解其要显示的汽车列表的任何信息。给了它一系列汽车，并显示它们。可能像：

<!-- car-list.html -->
<div ng-repeat="car in cars" ng-controller="CarListControl">
    {{car.year}} {{car.make}} {{car.model}}
</div>

Answer 1

该指令在父作用域和子作用域中重命名的“本地”变量之间提供了2路数据绑定。它可以与其他指令结合使用，例如ng- include实现出色的模板可重用性。需要AngularJS 1.2.x

标记

<div with-locals locals-cars="allCars | onlyNew"></div>

这是怎么回事：

• 这基本上是ngInclude指令的扩展，允许您从父范围传递 重命名的 变量。ngInclude完全不需要，但是此指令已设计为可以很好地使用它。
• 您可以附加任意数量的locals-*属性，所有这些属性都将 作为Angular表达式 进行解析和监视。
  • 这些表达式可用于作为$scope.locals对象属性附加的部分。
  • 在上面的示例中，locals-cars="..."定义了一个表达式，该表达式可以用作$scope.locals.cars。
  • 类似于data-cars="..."使用jQuery通过jQuery使用属性的方式.data().cars

指令

编辑 我已经重构为利用（独立于）本机ngInclude指令，并将某些计算移至编译函数中以提高效率。

angular.module('withLocals', [])
.directive('withLocals', function($parse) {
    return {
        scope: true,
        compile: function(element, attributes, transclusion) {
            // for each attribute that matches locals-* (camelcased to locals[A-Z0-9]),
            // capture the "key" intended for the local variable so that we can later
            // map it into $scope.locals (in the linking function below)
            var mapLocalsToParentExp = {};
            for (attr in attributes) {
                if (attributes.hasOwnProperty(attr) && /^locals[A-Z0-9]/.test(attr)) {
                    var localKey = attr.slice(6);
                    localKey = localKey[0].toLowerCase() + localKey.slice(1);

                    mapLocalsToParentExp[localKey] = attributes[attr];
                }
            }

            var updateParentValueFunction = function($scope, localKey) {
                // Find the $parent scope that initialized this directive.
                // Important in cases where controllers have caused this $scope to be deeply nested inside the original parent
                var $parent = $scope.$parent;
                while (!$parent.hasOwnProperty(mapLocalsToParentExp[localKey])) {
                    $parent = $parent.$parent;
                }

                return function(newValue) {
                    $parse(mapLocalsToParentExp[localKey]).assign($parent, newValue);
                }
            };

            return {
                pre: function($scope, $element, $attributes) {

                    // setup `$scope.locals` hash so that we can map expressions
                    // from the parent scope into it.
                    $scope.locals = {};
                    for (localKey in mapLocalsToParentExp) {

                        // For each local key, $watch the provided expression and update
                        // the $scope.locals hash (i.e. attribute `locals-cars` has key
                        // `cars` and the $watch()ed value maps to `$scope.locals.cars`)
                        $scope.$watch(
                            mapLocalsToParentExp[localKey],
                            function(localKey) {
                                return function(newValue, oldValue) {
                                    $scope.locals[localKey] = newValue;
                                };
                            }(localKey),
                            true
                        );

                        // Also watch the local value and propagate any changes
                        // back up to the parent scope.
                        var parsedGetter = $parse(mapLocalsToParentExp[localKey]);
                        if (parsedGetter.assign) {
                            $scope.$watch('locals.'+localKey, updateParentValueFunction($scope, localKey));
                        }

                    }
                }
            };
        }
    };
});