로드 후 Angles Js Ng-Route 실행 스크립트

Question

Angular JS Ng-Route에 관한 문제가 있습니다. 경로를 지정할 수 있지만 템플릿이 오면 나는 스크립트를 실행해야하지만 그렇게 할 수는 없다.

Ex. selectpicker (bootstrap)를 추가하고 싶습니다. 검색 할 수 있습니다. 그러나 내가 그 템플릿을 보낼 때 selectpicker를 얻을 수는 있지만 작동하지 않을 것입니다. 거기에 검색 바가 없습니다.

App.js

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

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

부분/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> 

Answer 1

그것의 작업이 당신을하는 데 도움이 codePen 희망을 참조하십시오.

나는 미스 것은 selectPicker의 각도 래퍼 ng-selectpicker

에게 u는이를 실현하려 컨트롤러를 결합 할 수있는 특정 경로에 스크립트 U를 실행하는 또 다른 한가지를 사용하지 통해 UR 생각합니다.

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