Angularjs 并选择不一起工作答案

【问题标题】：Angularjs and chosen not working togetherAngularjs 并选择不一起工作
【发布时间】：2015-08-31 21:50:50
【问题描述】：

我正在使用一个选择的 select，我在其中以角度方式从 json 文件加载数据，如果 select 这是常见的 html select，但如果我决定使用所选的 select ，它只是不加载，现在我知道它是在网页渲染后获取的数据。我为这个问题做了一个指令，但它不起作用。

我的html代码：

<!DOCTYPE html>
<html ng-app="App">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
  <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>


   <link rel = "stylesheet"   type = "text/css"   href = "./css/style.css" />  <!--css con colores y formatos de celdas  -->

<script src="jquery.min.js"></script>
<script src='chosen.jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="chosen.min.css" />
</head>
<body ng-controller="appCtrl">


<!--id='sl_edo'-->
<select class="control-group" id='sl_edo'  style="width:300px;">

  <optgroup ng-repeat="pueblo in pueblos | orderBy:'estado'" label={{pueblo.estado}}>
    <option>{{pueblo.localidad}}</option>

  </optgroup>

</select>


     <script src="./scripts/json_load.js"></script>   <!--script que cargar archivo json-->   


</body>
</html>

load_json.js：

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


App.controller('appCtrl', function($scope, $http) {

  $http.get('json/pueblos.json')
       .then(function(res){
          $scope.pueblos = res.data;                
        });

});


App.directive('chosen', function($timeout) {

  var linker = function(scope, element, attr) {

    scope.$watch('pueblos', function() {
      $timeout(function() {
        element.trigger('chosen:updated');
      }, 0, false);
    }, true);

    $timeout(function() {
      element.chosen();
    }, 0, false);
  };

  return {
    restrict: 'A',
    link: linker
  };
});

关于问题可能是什么的任何提示/想法？

【问题讨论】：

标签： jquery angularjs jquery-chosen

【解决方案1】：

不确定这是否是问题所在，但您从 cdn 加载了两次 jQuery <script src="jquery.min.js"></script>。删除本地的或仅在 cdn 失败时加载。

另一点是您尚未将 chosen 指令添加到您的标记中，但这可能只是问题中缺少的。

以下是您的带有修改后的脚本标签的代码。同样的演示也在plunkr。

我认为您的代码没有其他问题。

// Code goes here
var App = angular.module('App', []);


App.controller('appCtrl', function($scope, $http) {

  /* // commented here because can't load JSON at SO
    $http.get('pueblos.json')
       .then(function(res){
         console.log(res);
          $scope.pueblos = res.data;                
        });*/
  
  $scope.pueblos = [
  {
    "localidad": "Germany",
    "estado": "new"
  },
  {
    "localidad": "Spain",
    "estado": "old"
  },
  {
    "localidad": "USA",
    "estado": "broken"
  }];

});


App.directive('chosen', function($timeout) {

  var linker = function(scope, element, attr) {

    scope.$watch('pueblos', function() {
      $timeout(function() {
        element.trigger('chosen:updated');
      }, 0, false);
    }, true);
  $timeout(function() {
      element.chosen();
    }, 0, false);
/*
   $(function () {
    //$timeout(function() {
      //console.log($(element));
      $(element).chosen();
    //}, 0, false);
    //}),
    });*/
  };
  return {
    restrict: 'A',
    link: linker
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
  <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    
    <script>window.jQuery || document.write('<script src="jquery.min.js">\x3C/script>')</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen-sprite@2x.png"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <div ng-app="App" ng-controller="appCtrl">


  <!--id='sl_edo'-->
  <select class="control-group chosen-select" chosen id='sl_edo'  style="width:300px;">
  
    <optgroup ng-repeat="pueblo in pueblos | orderBy:'estado'" label={{pueblo.estado}}>
      <option>{{pueblo.localidad}}</option>
  
    </optgroup>
  
  </select>
  </div>

【讨论】：