方法2.最佳创意：将您的数据磨成适当的模型，MVC-Programmer-Guy先生！

Question

假设我有这样的模板：

    <div>
        <div>
            <span>Description:</span><span>{{YPOBatch.YarnPOBatch.YarnType.YarnTypeDesc}}</span>
        </div>
        <div>
            <span>ID:</span><span>{{YPOBatch.YarnPOBatch.YarnType.YarnTypeID}}</span>
        </div>
    </div>

为了更清晰，更易于阅读和维护代码，我希望能够编写类似的内容：

    <div ng-directive-that-I-am-at-a-loss-for="YPOBatch.YarnPOBatch.YarnType">
        <div>
            <span>Description:</span><span>{{YarnTypeDesc}}</span>
        </div>
        <div>
            <span>ID:</span><span>{{YarnTypeID}}</span>
        </div>
    </div>

这样两个代码块都是等价的。是否有一个开箱即用的指示符可以做我想要的？

Answer 1

嗯，从表面上看，这似乎是一个简洁的想法......但实际上我不确定这是个好主意。

方法1.花哨指令可能是一个坏主意

为了做到这一点，你需要创建一个新的Scope并将其编译到transcluded视图中。换句话说，你获取你的指令所在元素的内容，你克隆它，你创建一个新的子Scope，你更新它以获得你指定的属性的值，然后你绑定新的子范围到克隆然后将元素附加到元素中。然后，您还将原始属性指定为新创建的范围。像泥一样清楚？嘿。

编辑：我已经消除了双向绑定问题

编辑：...并简化了很多

虽然它仍然有点疯狂，因为现在你的原始$ scope.property成为它自己的范围。但它确实有效。

无论如何，here's a plunk of how you could do i和一些代码...... 我不建议使用此功能，甚至尝试使用。

app.directive('notSureWhyYoudWantThis', function($parse) {
  return {
    scope: true,
    link: function(scope, elem, attrs) {
      // get the property getter/setter
      var property = $parse(attrs.notSureWhyYoudWantThis);

      // get the value from the scope (inherited from parent)
      var base = property(scope);

      // extend the child scope with whatever is in the base property.
      angular.extend(scope, base);

      // now set the property on the parent scope to be the child scope,
      // so it updates both ways.
      property.assign(scope.$parent, scope);
    }
  }
});

<div not-sure-why-youd-want-this="YPOBatch.YarnPOBatch.YarnType">
    <div>
        <span>Description:</span><span>{{YarnTypeDesc}}</span>
    </div>
    <div>
        <span>ID:</span><span>{{YarnTypeYarnTypeID}}</span>
    </div>
</div>

方法2.最佳创意：将您的数据磨成适当的模型，MVC-Programmer-Guy先生！

所以这里最好的想法是最不性感的，你从数据源（AJAX，LocalStorage，等等）获取的丑陋数据，你实际上将它培养成最能代表你的视图/显示逻辑的模型。然后将该模型放在$ scope的属性中。然后结束。

这正是你所想要的在MVC中所做的事情，特别是如果你在所有的Domain Driven中，但是由于额外的工作，这对某些人来说并没有吸引力，有时候，我们希望能够以单数形式直接提交数据。

var ypoBatch= myService.getSomeDataFromSomething();

$scope.yarnType = {
   id: ypoBatch.YarnPOBatch.YarnTypeYarnTypeID,
   description:  ypoBatch.YarnPOBatch.YarnTypeDesc
};

然后在你看来：

<div>
    <div>
        <span>Description:</span> <span>{{yarnType.description}}</span>
    </div>
    <div>
        <span>ID:</span> <span>{{yarnType.id}}</span>
    </div>
</div>

无聊：是的。

更好：可能。

如何做到这一点显然是情境化的。但那是个主意。而现在你有很多方法可以给这只猫上皮。祝你好运。

Answer 2

开箱即用我不相信有这样的事情。你可以试试这样的东西

app.directive('expandModel', function() {
  return {
    scope: true,
    link: function(scope, elem, attrs) {
      angular.extend(scope, scope.$eval(attrs.expandModel));
    }
  }
});

这将为指令创建一个新范围，该指令仍然原型继承自其父级，同时复制您指定的属性路径的所有模型值。

或者，如果您希望更改模型值，请使用范围。$ watch而不是范围。$ eval。

Plunker现在正在起作用，否则我会为你准备好。

Answer 3

我认为你正在为错误的抽象层次而努力。如果您需要一个指令来显示有关纱线的信息，您可以将整个演示文稿包装成可重复使用的块。

module.directive('yarnDisplay', [function() {
    return {
        restrict: 'E',
        scope: {
            yarn: '=' //the parent scope will manage finding the yarn
        },
            template: '<div><div><span>Description:</span><span>{{yarn.YarnTypeDesc}}</span></div><div><span>ID:</span><span>{{yarn.YarnTypeYarnTypeID}}</span></div></div>',
        link: function(scope, el, attrs, controller) {

            }
}]);

使用该指令，只要您需要显示有关纱线的信息，您就可以包含以下HTML：

<yarn-display yarn='YPOBatch.YarnPOBatch' />

寻找能够进行模型封装的Angular Directive

3 个答案:

方法1.花哨指令可能是一个坏主意

方法2.最佳创意：将您的数据磨成适当的模型，MVC-Programmer-Guy先生！