Angular Js Ng-Route Run Script After Load

Question

i have an issue about Angular JS Ng-Route. I can route, but when the template comes. I should run a script but i cannot do that.

Ex. I want to add selectpicker (bootstrap), i can search in it. But when i route that template i can get the selectpicker but it will not work, there is no search-bar in it.

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>

score 0 · Accepted Answer · answered May 10 '17 at 07:39

Its working see this codePen hope this helps you.

I think the miss thing is ur not using selectPicker's angular wrapper ng-selectpicker

another thing to run the script u in particular route u can bind a controller to achive this.

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

Angular Js Ng-Route Run Script After Load

1 Answers1