1

Ich habe ein Problem mit Angular JS Ng-Route. Ich kann routen, aber wenn die Vorlage kommt. Ich sollte ein Skript ausführen, aber ich kann das nicht tun.Angular Js Ng-Route Script nach Laden ausführen

Ex. Ich möchte selectpicker (bootstrap) hinzufügen, ich kann darin suchen. Aber wenn ich diese Schablone route, kann ich den selectpicker holen, aber es funktioniert nicht, es gibt keine Suchleiste darin.

App.js

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

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

Partial/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> 

Antwort

0

Seine Arbeiten finden Sie in diesem codePen hoffen, dass diese Ihnen hilft.

Ich denke, die Chance vertan, was ur ist nicht selectPicker eckiges Wrapper ng-selectpicker

eine andere Sache mit dem Skript u insbesondere Route laufen u einen Controller, dies achive binden kann.

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; 
    }; 
});