Question

我有以下设置：

应用/指令

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>

这是一个非常简单的例子，但我不能让它渲染。也许教程没有告诉我，或者是秘密的角度知识？

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

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

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

Answer 1

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

请勿在属性名称中使用大小写混合。 displaytext 不 displayText
将<td>标记放在指令之外的模板

这样做，它会起作用;它认为这些都是角色错误。

Answer 2

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

如果您希望该指令封装由父作用域定义的集合的枚举，则会获得一点反转。我不确定以下是“最佳做法”，但这是我处理它的方式 - http://plnkr.co/edit/IU8fANreYP7NYrs4swTW?p=preview

当依赖指令执行迭代时，你会参与翻译，这是一个组成单词，意思是（据我理解）采用父类中定义的内容，将其推入指令然后进行评估。我已经使用角度工作了几个月，我开始认为要求指令迭代是一种气味，而且我总是可以围绕它进行设计。

Answer 3

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

<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。我没有测试过这个！

Answer 4

不要将你的指令写成ng-repeat的子代，而是尝试将自定义指令保持在与ng-repeat相同的水平上，这个

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

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

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

Answer 5

我遇到了类似的问题，我的视图中的ng-repeat如果视图包含指令（＆＃39; mydirective＆＃39;）

则不会评估

我的指令定义是

QGuiApplication::font()

我的视图控制器定义是

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

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

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

现在，我的指令定义是

  angular.module('myApp')
    .component('myView', {
      templateUrl: 'app/views/myview.html',
      controller: myViewComponent,
      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) {
      }
    };
  });

希望它有所帮助。

Answer 6

有完全相同的问题。在ng-repeat，table-＆gt; tr-＆gt; td-＆gt;指令中有自定义指令，并且在使用ng-repeat和Array.sort对表进行排序时，表确实更改了顺序，但指令没有重新呈现。问题是我正在使用

track by $index

从ng-repeat中通过索引删除了轨道并将其修复。

Angular Directive不评估ng-repeat内部

6 个答案: