angularjs - 不应该有一个 AngularJS ngWith 指令吗？

Question

也许我疯了，或者太习惯了KnockoutJS ，但我一直在文档中寻找 ngWith 指令来定义元素、 Controller 或包含(ngInclude)部分的范围。

例如:

我想编写一个增强 MyItem 的 Controller ，例如:

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

或 MyItem 的 View /模板，例如:

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

但在这两种情况下，我都在想象我的 $scope 原型(prototype)继承自我的模型 MyItem .

但是范围不继承自模型!

这让我很困惑。

相反，我的模型是 房产 范围上。

在中继器的情况下:

<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而不仅仅是 this和 that .我必须记住哪些函数是模型的原生函数，哪些函数是由 Controller 直接应用于范围的。

如果我想部分显示名称(愚蠢的例子，我知道，但你明白了):

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

我必须写它

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

然后确保模型始终是项目。通常通过将它包装在一个指令中来定义一个带有 item 的范围。属性(property)。

我经常觉得我想做的只是:

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

是否有一些我没有找到的神奇指令？还是我完全错了，只是在找麻烦？

谢谢。

编辑:

非常感谢 Brandon Tilley 解释了使用示波器作为模型的危险。但我仍然经常发现需要一些快速的声明性范围操作，并希望使用 ng-with 指令。

例如，您有一个项目列表，单击该列表时，将显示所选项目的扩展 View 。你可以这样写:

<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 .我还必须使用 selection在 ItemController !使其完全与这种观点相结合。

我知道，在这个简单的示例中，我可以有一个包装 Controller 来使其工作，但它说明了这一点。

我写了一个很基础的 with指示:

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

}]);

这只是创建一个新的范围，将一个表达式解析为另一个值，允许:

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

这对我来说似乎无限有用。

我在这里错过了什么吗？只是以某种方式为自己制造麻烦？

Answer 1

我发现我可以在 ng-repeat 的源周围放置一个数组，它在功能上变成了一个 ng-with。 :)

<div ng-repeat="name in [vm.dto.Person.Name]" >
  <input type="text" ng-model="name.First" />
  <input type="text" ng-model="name.Last" />
</div> 

似乎有些纯粹的人可能不喜欢这样......而且似乎也没有一个好的选择。