为什么我的自定义AngularJS指令在select选项中不起作用？

Question

I have a custom directive that I want to use within a select option element. 我有一个要在select选项元素中使用的自定义指令。 I explicitly do not want to move the select into the directive's template, because I use the same directive at other places, too. 我明确不想将select移到指令的模板中，因为我在其他地方也使用相同的指令。 Unfortunately, I cannot get it to work within a select option, probably because there is some intricate detail which I do not yet understand. 不幸的是，我无法使其在选择选项中正常工作，可能是因为有一些我还不了解的复杂细节。 Ideas, anyone? 想法，有人吗？

Here is my simplified example, derived from a documentation example (also on Plunker at http://plnkr.co/edit/Cod5menNABfeETTtah45?p=preview ): 这是我的简化示例，该示例源自文档示例（也位于Plunker的http://plnkr.co/edit/Cod5menNABfeETTtah45?p=preview ）：

<head>
  <meta charset="UTF-8">
  <title>Directive not working in select option</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
  <script>
    angular.module('docsSimpleDirective', [])
      .controller('Controller', ['$scope',
        function($scope) {
          $scope.customerId = 2;
          $scope.customers = {
            '1': {
              name: 'Naomi',
              address: '1600 Amphitheatre'
            },
            '2': {
              name: 'Jim',
              address: '1200 South'
            }
          };
        }
      ])
      .directive('myCustomer', function() {
        return {
          scope: {
            cust: '='
          },
          template: '{{cust.name}}'
        };
      });
  </script>
</head>

<body ng-app="docsSimpleDirective">
  <div ng-controller="Controller">
   <h3>Simple ng-repeat (Works)</h3>
    <ul>
      <li ng-repeat="(cid, cust) in customers"><span>Plain: {{cust.name}}</span> / Directive: <span my-customer cust="cust"></span>
      </li>
    </ul>
    <h3>Select Options (Does not work)</h3>
    <select ng-model="customerId">
      <option ng-repeat="(cid, cust) in customers" value="{{cid}}" ng-selected="cid == customerId">
        Plain: <span>{{cust.name}}</span> / Directive: <span my-customer cust="cust"></span>
      </option>
    </select>
    <br/>{{customers[customerId].address}}
    <br/>(<span my-customer cust="customers[customerId]"></span>)
  </div>
</body>

</html>

Answer 1

BenCr's comment was right. BenCr的评论是正确的。 It does not work because of the span. 由于跨度，它不起作用。 Thank you! 谢谢！ If I use the directive directly on the option element, it does actually work: 如果我直接在option元素上使用指令，则它确实可以工作：

<body ng-app="docsSimpleDirective">
  <div ng-controller="Controller">
   <h3>Simple ng-repeat</h3>
    <ul>
      <li ng-repeat="(cid, cust) in customers" my-customer cust="cust"></li>
    </ul>
    <h3>Select Options</h3>
    <select ng-model="customerId">
      <option ng-repeat="(cid, cust) in customers" value="{{cid}}" ng-selected="cid == customerId" my-customer cust="cust"></option>
    </select>
    <br/>{{customers[customerId].address}}
    <br/>(<span my-customer cust="customers[customerId]"></span>)
  </div>
</body>

New Plunker: http://plnkr.co/edit/Cod5menNABfeETTtah45?p=preview 新柱塞： http ://plnkr.co/edit/Cod5menNABfeETTtah45?p=preview

为什么我的自定义AngularJS指令在select选项中不起作用？

问题描述

1 个解决方案

解决方案1
0 2014-03-30 21:10:15

为什么我的自定义AngularJS指令在select选项中不起作用？

问题描述

1 个解决方案

解决方案1 0 2014-03-30 21:10:15

解决方案1
0 2014-03-30 21:10:15