Angularjs и решили не работать вместе

Я использую выбранное выберите, в котором я загрузить данные из JSON файл угловой путь, загружает данные штраф, если выбрать это общий HTML выберите, но если я решил использовать выбранный , то выберите, он просто не загружается, теперь я знаю, что данные, которые он извлекал позже после рендеринга веб-страницы. Я сделал директиву для этой проблемы, но она не работает.Angularjs и решили не работать вместе

мой 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 
    }; 
});

любые намеки/идеи, что может быть проблема?

источник

2015-08-31 B.J. A.A.

Не уверен, что это проблема, но вы загружаете jQuery дважды <script src="jquery.min.js"></script> и из cdn. Удалите локальный файл или сделайте его загруженным только в случае сбоя 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/[email protected]"></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>

источник

2015-08-31 23:13:11 AWolf

Angularjs и решили не работать вместе

ответ

Смежные вопросы