不应该有一个AngularJS ngWith指令？

本文介绍了不应该有一个AngularJS ngWith指令？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

也许我疯了，还是太习惯，但我一直在寻找的文档的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?

prototypal

不应该有一个AngularJS ngWith指令？

问题描述

推荐答案