不应该有一个AngularJS ngWith指令？ [英] Shouldn't there be an AngularJS ngWith directive?

问题描述

也许我疯了，还是太习惯 KnockoutJS ，但我一直在寻找的文档的ngWith指令来定义范围一个元件上，在控制器，或用于一个包含（ngInclude）部分。

Maybe I'm crazy, or too used to KnockoutJS, but I keep looking for an ngWith directive in the docs to define the scope on an element, in a controller, or for an included (ngInclude) partial.

例如：

我想写一个控制器，增强MyItem喜欢的：

I'd like to write a controller that augments MyItem like:

MyModule.controller('MyItemCtrl', function($scope) {
    $scope.doSomethingToItem = function() {
        $scope.name = "bar";
    };
});

或为MyItem像一个视图/模板：

Or a view/template for MyItem like:

<div ng-controller="MyItemCtrl">
    {{name}}
    <button ng-click="doSomethingWithItem()">Do Something</button>
</div>

但是，在这两种情况下我想象我的$范围从我的模型中典型继承， MyItem 。

但范围不从模型继承!!

这令我感到困惑。

相反，我的模型是对范围的属性即可。

Instead, my model is a property on the scope.

在一个中继器的情况下：

In the case of a repeater:

<div ng-repeat="item in list">
    <div ng-controller="MyItemCtrl">
        {{item.name}}
        <button ng-click="doSomethingWithItem()">Do Something</button>
    </div>
</div>

这意味着无论我不得不使用 item.this 或 item.that ，而不是仅仅这个和是。我必须记住哪个功能是天然的模型，并且这是由一个控制器直接施加到的范围。

which means everywhere I have to use item.this or item.that instead of just this and that. I have to remember which functions are native to the model, and which were applied directly to the scope by a controller.

如果我想有一个部分显示姓名的（例如愚蠢，我知道，但你的想法）的：

If I want to have a partial to display names (stupid example, I know, but you get the idea):

<h3>{{name}}</h3>

我把它写

<h3>{{item.name}}</h3>

，然后确保模型的总是的项目。通常由包裹在一个指令简单地定义与项目财产范围。

and then ensure the model is always item. Usually by wrapping it in a directive simply to defines a scope with an item property.

我常常觉得我想要做的是简单的：

What I often feel like I want to do is simply:

<div ng-include="'my/partial.html'" ng-with="item"></div>

或

<div ng-repeat="list" ng-controller="MyItemCtrl">            
    {{name}}
    <button ng-click="doSomethingWithItem()">Do Something</button>
</div>

有一些神奇的指令，在那里，我还没有发现？还是我完全错了，只是自找麻烦？

Is there some magical directive out there that I haven't found? Or am I completely wrong and just looking for trouble?

感谢。

编辑：

非常感谢布兰登·蒂利用于解释使用范围为榜样的危险。但我还是经常发现一些快速的声明范围内操作的需求，并希望有NG-与指令。

Many thanks to Brandon Tilley for explaining the dangers of using scopes as models. But I still often find the need for some quick declarative scope manipulation and wish for an ng-with directive.

举个例子，你有一个项目列表，点击后，显示所选项目的扩展视图。你可能会写这样的：

Take, for example, you have a list of items which, when clicked, shows an expanded view of the selected item. You might write it something like:

<ul>
    <li ng-repeat="item in items" ng-click="selection = item">{{item.minView}}</li>
</ul>
<div ng-controller="ItemController">
    {{selection.maxView}}
</div>

现在，你必须得到使用 selection.property 选定的项目，而不是我想要的东西的属性： item.property 。我也不得不使用选在 ItemController ！使得它完全配上了这一观点。

now you have to get properties of the selected item using selection.property rather than what I'd want: item.property. I'd also have to use selection in ItemController! Making it wholly coupled with this view.

我知道，在这个简单的例子，我可以有一个包装控制器，使其工作，但它说明了这一点。

I know, in this simple example I could have a wrapping controller to make it work, but it illustrates the point.

我写了一个非常基本的与指令：

I've written a very basic with directive:

myApp.directive('with', ['$parse', '$log', function(parse, log) {

    return {
        scope: true,
        link: function(scope, el, attr) {
            var expression = attr.with;
            var parts = expression.split(' as ');

            if(parts.length != 2) {
                log.error("`with` directive expects expression in the form `String as String`");
                return;
            }

            scope.$watch(parts[0], function(value) {
                scope[parts[1]] = value;
            }, true);
        }
    }

}]);

这只是创建了一个新的作用域解析一名当然pression到另一个价值，使：

that simply creates a new scope parsing one expression onto another value, allowing:

<ul>
    <li ng-repeat="item in items" ng-click="selection = item">{{item.minView}}</li>
</ul>
<div with="selection as item" ng-controller="ItemController">
    {{item.maxView}}
</div>

这似乎是无限对我很有用。

This seems infinitely useful to me.

我失去了一些东西在这里？只是让我自己麻烦莫名其妙地倒行？

Am I missing something here? Just making trouble for myself down the line somehow?

推荐答案

这是一个很大的问题。我可以看到这可能会产生混淆从另一前端框架的到来，但棱角分明，范围有模型的引用，您所描述的语法是正常的。我个人很喜欢来形容范围为更像视图模型。

This is a great question. I can see how this may be confusing coming from another front-end framework, but in Angular, the scope has a reference to the model, and the syntax you're describing is normal. I personally like to describe the scope as more like a view model.

MISKO Hevery，AngularJS的作者，在做的这段视频，开始约30分钟大关，并持续约3分钟：

Miško Hevery, the author of AngularJS, does a good job of explaining this concept in this video, starting at about the 30 minute mark and lasting about 3 minutes:

人们常常认为的范围是模型，而事实并非如此。范围已的引用的到模型。 [...]因此，在视图中，你说模型点您要访问的任何属性。

People oftentimes think that the scope is the model, and that's not the case. Scope has references to the model. [...] So in the view, you say model dot whatever property you want to access.

虽然有可能写出不种，你在找什么，因为角使用原型继承的范围，你可能会运行一个 ngWith 指令成MISKO描述了上述视频在31:10 ，你认为你在更新值相同的问题（父范围，但你实际上不是）。有关在AngularJS原型继承的更多详细信息，请查看优秀文章的细微差别适用范围原型继承中的AngularJS维基。

While it may be possible to write an ngWith directive that does kind-of what you're looking for, since Angular uses prototypal inheritance for scopes, you will likely run into the same issues that Miško describes in the aforementioned video at 31:10 (where you think you're updating a value on the parent scope but you're actually not). For more details on prototypal inheritance in AngularJS, check out the excellent article The Nuances of Scope Prototypal Inheritance on the AngularJS wiki.

这篇关于不应该有一个AngularJS ngWith指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！