Question

我有嵌套模型，我试图避免vm.someObject.someChild.ChildOfChild.name类型的情况。有没有办法为外部<div>设置模型，以便我可以改为使用ChildOfChild.name甚至名称。在Silverlight中，这称为DataContext。我把“vm”放在$ scope上，但在html中我想避免输入属性的完整路径。

例如：

 <div>
    {{someObject.Id}}
    <div>
        {{someObject.name.first}}
        {{someObject.name.last}}
    </div>
     <div>
            {{someObject.someChild.name.first}}
     </div>
 </div>

我想做这样的事情

  <div datacontext = someObject>
    {{Id}}
    <div datacontext = name>
        {{first}}
        {{last}}
    </div>
     <div datacontext = someChild.name>
            {{first}}
     </div>
 </div>

Answer 1

您可以使用自定义指令执行此操作。

HTML：

<div ng-app="myApp" ng-controller="myCtrl as ctrl">
  <div>
      Access from deepObj: {{ctrl.deepObj.one.two.three.four}}
  </div>
  <div scope-context="ctrl.deepObj.one.two.three">
      Access from third level: {{four}}
  </div>
</div>

JS：

var myApp = angular.module('myApp', []);

var myCtrl = function() {
    this.deepObj = {one: {two: {three: {four: "value"}}}};
};

myApp.directive('scopeContext', function () {
    return {
        restrict:'A',
        scope: true,
        link:function (scope, element, attrs) {
            var scopeContext = scope.$eval(attrs.scopeContext);
            angular.extend(scope, scopeContext);
        }
    };
});

有关scope: true的信息，请参阅$compile上的文档。

请确保您不要将指令称为data-context，因为以data-开头的属性在HTML5中具有特殊含义。

以下是plunker：http://plnkr.co/edit/rMUQlaNsH8RTWiRrmohx?p=preview

请注意，这可能会破坏作用域上下文中原始值的双向绑定。请参阅此plunker以获取示例：http://plnkr.co/edit/lCuNMxVaLY4l4k5tzHAn?p=preview

Answer 2

您可以尝试/滥用ng-init

尝试ng-init，您将一个更多.，但这比我见过的其他答案要好：

<div ng-init="x = foo.bar.baz">
   {{x.id}}
   {{x.name}}
</div>

但是请注意，这样做实际上会在您的范围内创建一个值，因此，如果您重复使用相同的名称，或者在转发器中执行此操作，请执行ng-model产生意想不到的结果。

为什么自定义指令可能不是一个好主意

@rob建议上面的内容很聪明，我以前看过它。但至少有一部分是他所涉及的问题：

范围复杂性：每当编译视图时，添加需要创建的n范围（具有原型继承）。
查看处理复杂性：在编译视图时添加需要在每个节点上检查的附加指令（同样没有真正的功能好处）。*
可读性？下一个Angular开发人员可能更少可读，因为它不同。
表单验证：如果您在Angular中对表单执行任何操作，则可能会破坏验证。
ng-model woahs ：用这种方式设置ng-model并不直观。您必须使用$parent.whatever或$parent.$parent.whatever，具体取决于您的背景情况。

*作为参考，视图的编译次数比您想象的要多：对于转发器中的每个项目，无论何时更改它，例如。

一个常见的想法，即不与Angular

我觉得这个问题经常出现在StackOverflow中，但我无法找到其他类似的问题ATM。 ...无论如何，如果你看一下上面的方法，并且给出关于副作用的警告，你应该能够辨别出你为了那个目的而做的事情可能不是一个好主意。可读性。

如何在嵌套模型时避免“香肠”类型绑定

2 个答案:

您可以尝试/滥用ng-init

为什么自定义指令可能不是一个好主意

一个常见的想法，即不与Angular