10

我有以下设置：

应用程序/指令

var app = angular.module("MyApp", []);

app.directive("adminRosterItem", function () {
    return {
        restrict: "E",
        scope: {
            displayText: "@"
        },
        template: "<td>{{ displayText }}</td>", // should I have this?
        link: function(scope, element, attrs){
            // What do I put here? I don't seem to have any
            // element to initialize (set up event handlers, for example)
        },
        compile: function(?,?,?){} // should I have this? If so, what goes inside?
    }
});

控制器

function PositionsController($scope) {
           $scope.positions = [{ Name: "Quarterback", Code: "QB" },
                               { Name: "Wide Receiver", Code: "WR" }
                              ]; 
}

HTML：

<div ng-app="MyApp">
    <div ng-controller="PositionsController">            
        <table>
            <tr ng-repeat="position in positions">
                <admin-roster-item displayText="{{ position.Name + ' (' + position.Code + ')' }}"></admin-roster-item>
             </tr>
         </table>       
    </div>
</div>

这是一个非常简单的示例，但我无法渲染它。也许有一些教程没有告诉我，或者那是秘密的 Angular 知识？

如果我删除<tr ng-repeat="..." />and place内的指令<td>{{ displayText }}</td>，它将显示所有记录。

但我希望该指令比单个<td>{{}}</td>（最终）更复杂，以便我可以在多个应用程序中重用该指令。

所以，我真的在问我们如何正确地创建一个进入 ng-repeat 的指令？我错过了什么？应该从上面的代码中删除什么？

4

6 回答 6

9

忽略所有理论方面，您可以通过进行两个简单的更改来使您的代码正常工作。

  1. 不要在属性名称中使用大小写混合。 displaytext 不是 displayText
  2. 将<td>标签放在指令之外，在模板中

这样做，它会奏效；它认为这些都是 Angular 错误。

于 2013-04-02T02:46:11.743 回答
8

同意您需要考虑指令的开始和结束位置。这是一个 plnkr，它说明了绑定到数组中每个项目的指令 - http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

如果您希望该指令封装由父范围定义的集合的枚举，它会变得有点棘手。我不确定以下是否是“最佳实践”，但这就是我处理它的方式——http: //plnkr.co/edit/IU8fANreYP7NYrs4swTW ?p=preview

当依赖指令执行迭代时，您会涉及到嵌入，这是一个虚构的词，意思是（据我了解）获取父项中定义的内容，将其推送到指令中，然后对其进行评估。我已经使用 angular 几个月了，我开始认为要求指令进行迭代是一种气味，我一直能够围绕它进行设计。

于 2013-04-02T02:31:31.357 回答
2

我认为解决此问题的正确方法是将对象发送到管理员名册项目中，如下所示：

<tr ng-repeat="position in positions">
  <admin-roster-item pos="position">         
  </admin-roster-item>
</tr>

并在指令中：

var app = angular.module("MyApp", []);

app.directive("adminRosterItem", function () {
  return {
    restrict: "E",
    scope: {
        pos: "@"
    },
    template: "<td>{{ formattedText }}</td>", // should I have this?
    link: function(scope, element, attrs){
        // all of this can easily be done with a filter, but i understand you just want to     
        // know how it works
        scope.formattedText = scope.pos.Name + ' (' + scope.pos.Code + ')';
    }
  }
});

PS。我没有测试这个！

于 2013-04-02T02:29:21.093 回答
1

不要将您的指令编写为 ng-repeat 的子级，而是尝试将自定义指令保持在与 ng-repeat 相同的级别，这 

<tr ng-repeat="position in positions" admin-roster-item displayText="{{ position.Name + ' (' + position.Code + ')' }}"></tr>

此外，允许将您的自定义指令用作属性。AngulaJS 已将 ng-repeat 优先级定义为 1000，因此有时当您制作自定义指令时，ng-repeat 不会很好地处理它。

第二个选项（仅在第一个失败时尝试）是将自定义指令的优先级设置为高于 ngRepeat 的优先级，即设置为 1001。

于 2016-04-27T10:52:09.490 回答
0

我有类似的问题，如果视图包含指令（'mydirective'），我的视图中的 ng-repeat 没有被评估

我的指令定义是

angular.module('myApp')
  .directive('myDirective', function () {
    return {
      templateUrl: 'components/directives/mydirective.html',
      restrict: 'EA',
      controller: 'MyDirectiveController',
      controllerAs: 'vm',
      link: function (scope, element, attrs) {
      }
    };
  });

我的视图控制器定义是

  angular.module('myApp')
    .component('myView', {
      templateUrl: 'app/views/myview.html',
      controller: myViewComponent,
      controllerAs: "vm"
    });

您可以注意到两个控制器都由 'vm' 通过使用 'controllerAs' 参数引用。这就是问题的原因。当指令出现在视图中时，角度总是指指令控制器中定义的“vm”而不是视图。

当我为控制器引用提供不同的名称时，问题消失了

现在，我的指令定义是

angular.module('myApp')
  .directive('myDirective', function () {
    return {
      templateUrl: 'components/directives/mydirective.html',
      restrict: 'EA',
      controller: 'MyDirectiveController',
      controllerAs: 'directiveVM',
      link: function (scope, element, attrs) {
      }
    };
  });

我的视图控制器定义是

  angular.module('myApp')
    .component('myView', {
      templateUrl: 'app/views/myview.html',
      controller: myViewComponent,
      controllerAs: "viewCtrlVM"
    });

希望能帮助到你。

于 2016-04-21T08:57:17.367 回答
0

有完全相同的问题。在 ng-repeat 中有一个自定义指令，table->tr->td->directive，当使用 ng-repeat 和 Array.sort 对表格进行排序时，表格确实改变了顺序，但指令没有重新渲染。问题是我正在使用

track by $index

从 ng-repeat 中按索引删除轨道并修复。

于 2017-06-28T07:53:07.370 回答