AngularJS 中 KnockoutJS 的“with”绑定？答案

【问题标题】：The "with" binding of KnockoutJS in AngularJS?AngularJS 中 KnockoutJS 的“with”绑定？
【发布时间】：2013-06-22 10:55:59
【问题描述】：

我刚刚从 KnockoutJS 切换到 AngularJS，我无法在 AngularJS 中找到 KnockoutJS 的“with”数据绑定。

这是 KnockoutJS 中的一段代码。 "with" 绑定创建一个新的绑定上下文，以便将后代元素绑定在指定对象的上下文中。

<h1 data-bind="text: city"> </h1>
<p data-bind="with: coords">
    Latitude: <span data-bind="text: latitude"> </span>,
    Longitude: <span data-bind="text: longitude"> </span>
</p>

<script type="text/javascript">
    ko.applyBindings({
        city: "London",
        coords: {
            latitude:  51.5001524,
            longitude: -0.1262362
        }
    });
</script>

AngularJS 有类似上下文的东西吗？

【问题讨论】：

首先了解 with 绑定是如何工作的，并尝试找出一些类似的指令，甚至发明一个

标签： angularjs knockout.js

【解决方案1】：

这是基于@nwayve 的解决方案，但它支持 koWith 中的表达式，并且它还监视更新 koWith 中指定的属性/表达式：

.directive('koWith', function () {
return {
    restrict: 'A',
    scope: true,
    controller: function ($scope, $attrs, $parse) {
        var ScopePropertyDesc = function (prop) {
            var self = this;
            self.propName = prop;
            self.parsed = $parse(prop);
            self.enumerable = true;
            self.configurable = true;
            //self.writable = true;
            self.get = function () {
                var withObj = $scope.$parent[$attrs.koWith];
                var res = self.parsed($scope.$parent, withObj);
                return res;
            };
            self.set = function (newValue) {
                var withObj = $scope.$parent[$attrs.koWith];
                self.parsed.assign(withObj, newValue);
            };
        };

        $scope.$parent.$watch($attrs.koWith, function (oldVal, newVal) {
            var withObj = $scope.$parent[$attrs.koWith];

            (function copyPropertiesToScope(withObj) {
                for (var prop in withObj) {
                    if (withObj.hasOwnProperty(prop)) {
                        Object.defineProperty($scope, prop, new ScopePropertyDesc(prop));
                    }
                };
            })(withObj);
        });
    }
};
});

【讨论】：

【解决方案2】：

创建一个循环遍历源对象的自定义指令，并在指令的范围内创建相应的属性，这些属性是对源对象的 getter/setter 引用。

看看这个plunker。

指令模块：

angular.module('koWith', [])
  .directive('koWith', function () {
    return {
      controller: function ($scope, $attrs) {
        var withObj = $scope.$parent[$attrs.ngWith];

        function getter(prop) {
          return this[prop];
        }
        function setter(val, prop) {
          this[prop] = val;
        }

        for (var prop in withObj) {
          if (withObj.hasOwnProperty(prop)) {
            Object.defineProperty($scope, prop, {
              enumerable: true,
              configurable: true,
              get: getter.bind(withObj, prop),
              set: setter.bind(withObj, prop)
            });
          }
        }
      },
      restrict: 'A',
      scope: true
    };
  });

应用模块：

angular.module('myApp', [])
  .controller('myController', function ($scope) {
    $scope.customer = {
      name: "Timmeh",
      address: {
        address1: "12 S Street",
        address2: "",
        city: "South Park",
        state: "CO",
        zipCode: "80440"
      }
    };
  });

html:

<div ko-with="customer">
  <h2>{{name}}</h2>
  <div ko-with="address">
    {{address1}}<br>
    {{address2}}<br>
    {{city}}, {{state}} {{zipCode}}
  </div>
</div>

说明

在 KnockoutJS 中，绑定将 bindingContext 和数据分开，因此创建 with 绑定很简单，因为它只需要从当前绑定创建一个新的子 bindingContext 并使用 with 对象作为其数据值。

在 AngularJS 中，指令的作用域基本上是 bindingContext 和数据对象合二为一。创建新作用域时，为了获得类似with 的行为，必须将with 对象的属性引用到新创建的作用域对象上。

【讨论】：

【解决方案3】：

与我所知道的完全不同..这是我能做的最好的：

<h1>{{city}}</h1>
<p ng-repeat="c in [coords.or.possibly.deeper.in.tree]">
    Latitude: {{c.latitude}},
    Longitude: {{c.longitude}}
</p>

【讨论】：