1

J'ai un problème à propos de Angular JS Ng-Route. Je peux router, mais quand le modèle vient. Je devrais lancer un script mais je ne peux pas faire ça.Angulaire Js Ng-Route Exécuter le script après chargement

Ex. Je veux ajouter selectpicker (bootstrap), je peux y chercher. Mais quand je route ce modèle je peux obtenir le selectpicker mais cela ne fonctionnera pas, il n'y a aucune barre de recherche dedans.

app.js

var myApp = angular.module("myApp", ["ngRoute"]); 

myApp.config(function($routeProvider) { 
$routeProvider 
    .when("/test", { 
     templateUrl: "partial/test.html" 
    }) 
    .otherwise({ 
     redirectTo: "404.html" 
    }); 
}); 

partielle/test.html

<div class="form-group"> 
    <label class="col-sm-4 control-label form-label">With Search input</label> 
    <div class="col-sm-8"> 
      <select class="selectpicker" data-live-search="true"> 
       <option>Hot Dog, Fries and a Soda</option> 
       <option>Burger, Shake and a Smile</option> 
       <option>Sugar, Spice and all things nice</option> 
      </select> 
    </div> 
</div> 

Répondre

0

Son travail voir cette codePen espère que cela vous aide.

Je pense que la chose est miss ur ne pas utiliser wrapper angulaire selectPicker ng-selectpicker

une autre chose pour exécuter le script u en route particulière u peut lier un contrôleur à ce achive.

var app = angular.module('app', ['ui.bootstrap','nya.bootstrap.select','ngRoute']); 

app.config(function($routeProvider, $locationProvider) { 
    $routeProvider 
    .when('/test', { 
    template: ` 
normal 
<div class="btn-group" dropdown> 
<button type="button" class="btn btn-default dropdown-toggle" ng-disabled="disabled">Button dropdown <span class="caret"></span></button> 
<ul class="dropdown-menu"> 
<li ng-repeat="choice in items" ng-click="selectAOption(choice)"> 
<a href>{{ choice }}</a> 
</li> 
</ul>  
</div> 
<div class="form-group"> 
<label class="col-sm-4 control-label form-label">With Search input</label> 
<div class="col-sm-8"> 


<select id="static-options" class="nya-selectpicker" ng-model="staticModel" data-container="body" data-live-search="true" multiple> 
<option value="alpha">alpha</option> 
<option value="bravo">bravo</option> 
<option value="charlie">charlie</option> 
</select> 
<br/> 

</div> 
</div> 
`, 
    controller: function($scope,$timeout) { 
     $scope.options = [ 
     'Alpha', 
     'Bravo', 
     'Charlie' 
     ]; 

     $scope.myModel = ['Bravo']; 
     $scope.items = [ 
     '~The first choice!', 
     '~And another choice for you.', 
     '~But wait! A third!' 
     ]; 

     $timeout(function() { 
     //$('.selectpicker').selectpicker(); 
     },0); 
     $scope.classname="edit"} 
    }) 
    .when('/Other', { 
    template: ` 
<div class="form-group"> 
<label class="col-sm-4 control-label form-label">I m other</label> 

</div> 
`, 
    controller: function($scope) {$scope.classname="edit"} 
    }) 

    .otherwise({redirectTo: '/test'}); 
    $locationProvider.html5Mode({ 
    enabled: true, 
    requireBase: false 
    }); 

}); 

app.controller('DropdownCtrl', function ($scope) { 

    // Initial status 
    $scope.status = { 
    isopen: false 
    }; 

    // Dynamic items 
    $scope.items = [ 
    'The first choice!', 
    'And another choice for you.', 
    'But wait! A third!' 
    ]; 

    $scope.info = "Select a option ..."; 
    $scope.selectAOption = function(choice){ 
    $scope.info = choice; 
    }; 
});