Question

我已经尝试过，但是我的指令无法解决问题。我想将select标签封装在一个指令中。它似乎工作正常，有一个问题：select语句中的标签未显示。我在这个plunker中提出了非指令和指令版本。任何帮助将不胜感激。

javascript：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.colors = [{"label": "blue", value: "1"},
                   {"label": "red", value: "2"},
                   {"label": "green", value: "3"}];

  $scope.color = $scope.colors[1];                     
});

app.directive('szpSelect', function() {
  function linker(scope, elem, attrs, ctrl) {
  }

  return {
      restrict: 'E',
      link: linker,
      replace: false,
      scope: {
        list: "=szpList",
        value: "=szpValue"
      },
      template: '<select ng-model="value" ng-options="o.label for o in {{list}}"></select>'
  }

});

html：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    (1)Non-directive: <select ng-model = "color"
            ng-options="o.label for o in colors"></select> 
    </br>        
    (2)    Directive: <szp-select szp-value="color"
                szp-list="colors">

    </szp-select>        
  </body>

</html>

Answer 1

您必须删除模板中的括号

template: '<select ng-model="value" ng-options="o.label for o in list"></select>'

Angularjs在指令中选择不显示标签

1 个答案: