Angularjs在指令中選擇不顯示標籤

我已經試過了，我無法弄清楚我的指令有什麼問題。我想將選擇標籤封裝在指令中。它似乎工作正常，有一個問題：select語句中的標籤未顯示。我在這plunker中提供了非指令和指令版本。任何幫助，將不勝感激。Angularjs在指令中選擇不顯示標籤

的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="[email protected]" 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>

來源

2014-03-04 zszep

您必須刪除在模板中的括號

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

來源

2014-03-04 07:33:10

知道它要的東西很容易。 – zszep

Angularjs在指令中選擇不顯示標籤

回答

相關問題