AngularJS - 如何渲染变量的部分？ [英] AngularJS - How to render a partial with variables?

问题描述

例如，我在部分汽车list.html ，我想呈现在几个地方与汽车不同的集合。也许是这样的：

 ＆LT; H1＆GT;所有新车＆LT; / H1＆GT;
＆LT; D​​IV NG-包括=汽车list.htmlNG-数据轿车=allCars | onlyNew＆GT;＆LT; / DIV＆GT;＆LT; H1＆GT;所有的丰田车和LT; / H1＆GT;
＆LT; D​​IV NG-包括=汽车list.htmlNG-数据轿车=allCars |汽车品牌：丰田＆GT;＆LT; / DIV＆GT;
 

从正常的主要区别包括在于局部不需要知道关于汽车其显示的哪个列表任何东西。它给汽车的数组，并显示它们。可能这样的：

 ＆LT;！ - 汽车list.html  - ＆GT;
＆LT; D​​IV NG重复=车车NG控制器=CarListControl＆GT;
    {{car.year}} {{car.make}} {{car.model}}
＆LT; / DIV＆GT;
 

解决方案

该指令提供2路在子范围父范围，并更名为局部变量之间的数据绑定。它可以与其它指令，比如 NG-包括为真棒模板重用相结合。需要AngularJS 1.2.x的

的jsfiddle： AngularJS - 包括与局部变量

部分

---

标记

 ＆LT; D​​IV与本地人当地人-汽车=allCars | onlyNew＆GT;＆LT; / DIV＆GT;
 

这是怎么回事：

• 这基本上是 ngInclude 指令的扩展，让你通过的改名变量从父范围。 ngInclude 是不是所有必需的，但该指令已被设计为与它很好地工作。


• 您可以将任意数量的当地人 - * 属性，它们都将被解析和放大器;看了您作为前角pressions 。
  
  
  
  • 那些前pressions成为提供给包括部分，连接为一个 $ scope.locals 对象的属性。
  
  
  • 在上面的例子中，当地人-汽车=...定义一个前pression变为可用为 $范围。 locals.cars 。
  
  
  • 类似如何数据轿车=...属性将使用通过jQuery可的.data（）。汽车
  
  

---

指示

修改我已经重构为使用（和独立的）本地 ngInclude 指令，以及一些计算进入编译功能，以提高效率。

  angular.module（'withLocals'，[]）
.directive（'withLocals'，函数（$解析）{
    返回{
        适用范围：真，
        编译：功能（元素，属性，包含）{
            //为每个匹配locals- *（驼峰格式当地人[A-Z0-9]）属性，
            //获取用于局部变量的钥匙，使我们可以在以后
            //它映射到$ scope.locals（在链接功能如下图）
            变种mapLocalsToParentExp = {};
            对于（以属性ATTR）{
                如果（attributes.hasOwnProperty（ATTR）及＆放大器; /^locals[A-Z0-9]/.test(attr））{
                    变种localKey = attr.slice（6）;
                    localKey = localKey [0] .toLowerCase（）+ localKey.slice（1）;                    mapLocalsToParentExp [localKey] =属性[ATTR]
                }
            }            VAR updateParentValueFunction =功能（$范围，localKey）{
                //找到初始化该指令的$父范围。
                //案件重要，因为控制器导致此$范围深深嵌套在原始父里面
                变量$父= $ $范围父。
                而（！$ parent.hasOwnProperty（mapLocalsToParentExp [localKey]））{
                    。$父= $ $父父;
                }                复位功能（newValue）以{
                    。$解析（mapLocalsToParentExp [localKey]）分配（$父，为newValue）;
                }
            };            返回{
                pre：函数（$范围，$元，$属性）{                    //设置`$ scope.locals`哈希这样我们就可以绘制前pressions
                    //从父范围进去。
                    $ scope.locals = {};
                    对于（localKey在mapLocalsToParentExp）{                        //对于每一个本地密钥，$观赏提供前pression和更新
                        //将$ scope.locals哈希值（即属性`当地人-cars`有钥匙
                        //`cars`和$表（）的值映射到`$ scope.locals.cars`）
                        $范围。$手表（
                            mapLocalsToParentExp [localKey]
                            功能（localKey）{
                                返回功能（为newValue，属性oldValue）{
                                    $ scope.locals [localKey] =为newValue;
                                };
                            }（localKey）
                            真正
                        ）;                        //还可观赏当地的价值和传播任何改变
                        //备份到母体范围。
                        变种parsedGetter = $解析（mapLocalsToParentExp [localKey]）;
                        如果（parsedGetter.assign）{
                            $ $范围手表（'本地人'+ localKey，updateParentValueFunction（$范围，localKey））。
                        }                    }
                }
            };
        }
    };
}）;
 

For example, I have a partial in car-list.html, and I want to render it in several places with different collections of cars. Maybe something like this:

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

The main difference from a normal include is that the partial doesn't need to know anything about which list of cars it's displaying. It's given an array of cars, and it displays them. Possibly like:

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

解决方案

This directive provides 2-way data-binding between the parent scope and renamed "local" variables in the child scope. It can be combined with other directives like ng-include for awesome template reusability. Requires AngularJS 1.2.x

jsFiddle: AngularJS - Include a partial with local variables

---

The Markup

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

What's going on:

• This is basically an extension of the ngInclude directive to allow you to pass renamed variables in from the parent scope. ngInclude is NOT required at all, but this directive has been designed to work well with it.
• You can attach any number of locals-* attributes, which will all be parsed & watched for you as Angular expressions.
  • Those expressions become available to the included partial, attached as properties of a $scope.locals object.
  • In the example above, locals-cars="..." defines an expression that becomes available as $scope.locals.cars.
  • Similar to how a data-cars="..." attribute would be available via jQuery using .data().cars

---

The Directive

EDIT I've refactored to make use of (and be independent of) the native ngInclude directive, and move some of the calculations into the compile function for improved efficiency.

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

                    }
                }
            };
        }
    };
});

这篇关于AngularJS - 如何渲染变量的部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！