blocks|key|292129|text|不像我所知道的那样..这是我能做的最好的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|292130|<h1>{{city}}</h1>
<p+ng-repeat="c+in+[coords.or.possibly.deeper.in.tree]">
++++Latitude:+{{c.latitude}},
++++Longitude:+{{c.longitude}}
</p>|code-block|syntax|javascript|292131|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Nothing like with that I know of.. this is the best I could do:</p>

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


blocks|key|292170|text|创建一个循环通过源对象的自定义指令，并在该指令的作用域上创建相应的属性，这些属性是对源对象的getter/setter引用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|292171|看看这个plunker。|offset|length|292172|指令模块：|292173|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
++++};
++});|code-block|syntax|javascript|292174|应用程序模块：|292175|angular.module('myApp',+[])
++.controller('myController',+function+($scope)+{
++++$scope.customer+=+{
++++++name:+"Timmeh",
++++++address:+{
++++++++address1:+"12+S+Street",
++++++++address2:+"",
++++++++city:+"South+Park",
++++++++state:+"CO",
++++++++zipCode:+"80440"
++++++}
++++};
++});|292176|html：|292177|<div+ko-with="customer">
++<h2>{{name}}</h2>
++<div+ko-with="address">
++++{{address1}}<br>
++++{{address2}}<br>
++++{{city}},+{{state}}+{{zipCode}}
++</div>
</div>|292178|解释|292179|在KnockoutJS中，绑定将bindingContext和数据分开，因此创建with绑定很简单，因为它只需要从当前的子bindingContext创建一个新的子and，并使用with对象作为其数据值。|style|CODE|292180|在AngularJS中，指令的作用域基本上是将bindingContext和数据对象合二为一。创建新的作用域时，为了获得with-like行为，必须将with对象的属性引用到新创建的作用域对象上。|292181|entityMap|0|LINK|mutability|MUTABLE|url|http://plnkr.co/edit/s4e6QR?p=preview^0|0|4|7|0|0|0|0|0|0|0|0|0|14|4|2H|4|0|1O|4|23|4|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@$D|1C|E|1D|1|1E]]|A|$]]|$1|F|3|G|5|6|7|1F|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1G|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1H|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1I|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1J|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|1K|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1L|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1M|8|@$D|1N|E|1O|Y|Z]|$D|1P|E|1Q|Y|Z]]|9|@]|A|$]]|$1|10|3|11|5|6|7|1R|8|@$D|1S|E|1T|Y|Z]|$D|1U|E|1V|Y|Z]]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]]]

<p>Create a custom directive that loops through the source object and creates corresponding properties on the directive's scope that are getter/setter references to the source object.</p>

<p>Check out this <a href="http://plnkr.co/edit/s4e6QR?p=preview" rel="noreferrer">plunker</a>.</p>

<h2>directive module:</h2>

<pre><code>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
    };
  });
</code></pre>

<h2>app module:</h2>

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

<h2>html:</h2>

<pre><code>&lt;div ko-with="customer"&gt;
  &lt;h2&gt;{{name}}&lt;/h2&gt;
  &lt;div ko-with="address"&gt;
    {{address1}}&lt;br&gt;
    {{address2}}&lt;br&gt;
    {{city}}, {{state}} {{zipCode}}
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<h2>Explanation</h2>

<p>In KnockoutJS, bindings keep the bindingContext and data separated so creating the <code>with</code> binding is trivial since it only needs to create a new child bindingContext from the current one and use the <code>with</code> object as its data value.</p>

<p>In AngularJS, a directive's scope is basically the bindingContext and data object rolled into one.  When a new scope is created, in order to get the <code>with</code>-like behavior, the properties of the <code>with</code> object have to be referenced onto the newly created scope object.</p>


blocks|key|74916|text|这是一个基于@nwayve的解决方案，但它支持koWith中的表达式，并监视在koWith中指定的属性/表达式的更新：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|74917|​|74918|.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);
++++++++});
++++}
};
});|code-block|syntax|javascript|74919|74920|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Here is solution based on @nwayve, but it supports expressions in koWith and also it watches for updating property/expression specified in koWith:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>.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);
        });
    }
};
});</code></pre>
</div>
</div>
</p>


<p>I have just switched from KnockoutJS to AngularJS and I am not able to find the KnockoutJS's "with" data-bind in AngularJS.</p>

<p>Here is the piece of code in KnockoutJS. The "with" binding creates a new binding context, so that descendant elements are bound in the context of a specified object.</p>

<pre><code>&lt;h1 data-bind="text: city"&gt; &lt;/h1&gt;
&lt;p data-bind="with: coords"&gt;
    Latitude: &lt;span data-bind="text: latitude"&gt; &lt;/span&gt;,
    Longitude: &lt;span data-bind="text: longitude"&gt; &lt;/span&gt;
&lt;/p&gt;

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

<p>Does AngularJS have anything like context?</p>


The "with" binding of KnockoutJS in AngularJS?

我刚刚从KnockoutJS切换到AngularJS，在AngularJS中找不到KnockoutJS的"with“数据绑定。下面是KnockoutJS中的一段代码。"with“绑定创建一个新的绑定上下文，以便在指定对象的上下文中绑定后代元素。<h1 data-bind="text: city"> </h1><p da...

问AngularJS中KnockoutJS的"with“绑定？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS中KnockoutJS的"with“绑定？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS中KnockoutJS的"with“绑定？
EN