2

假设我有一个这样的模板：

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

这样两个代码块将是等效的。是否有一个开箱即用的角度指令可以做我想要的？

4

3 回答 3

3

好吧，从表面上看，这似乎是一个好主意……但实际上我不确定这是一个好主意。

方法 1. 可能是个坏主意的 Fancy 指令

为此，您需要创建一个新的 Scope 并将其 $compile 到嵌入的视图中。换句话说，您获取指令所在元素的内容，克隆它，创建一个新的子范围，更新它以获取您指定的属性中的值，然后将该新的子范围绑定到克隆然后附加到您的元素的元素。然后，您还将原始属性分配为新创建的范围。清如泥？呵呵。

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

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

不过还是有点疯狂，因为现在你原来的 $scope.property 变成了它自己的范围。但它有效。

无论如何，这里有一些你可以如何做到的事情，以及一些代码......我不建议使用它，甚至不建议尝试它。

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 中做的事情，特别是如果你完全是领域驱动的，但它对某些人来说并不有吸引力，因为会产生额外的工作，有时希望能够直接提交以单数形式从前到后的数据。

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>

无聊：是的。

更好：可能。

显然，您如何执行上述操作将视情况而定。但这就是想法。现在你有很多方法可以给这只猫剥皮。祝你好运。

于 2013-10-07T16:29:34.400 回答
0

我认为您正在为错误的抽象级别拍摄。如果您需要一个指令来显示有关纱线的信息，您可以将整个演示文稿包装成一个可重用的块。

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' />
于 2013-10-07T15:25:39.400 回答
0

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

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

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

或者，如果您希望模型值发生变化，请使用 scope.$watch 而不是 scope.$eval。

Plunker 现在正在行动，否则我会给你一个 plunk。

于 2013-10-07T15:14:02.600 回答