Question

我有一个关于Angular JS Ng-Route的问题。我可以路由，但是当模板到来时。我应该运行一个脚本，但我不能这样做。

实施例。我想添加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

另一个运行脚本的东西尤其是路由你可以绑定一个控制器来实现这个目的。

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

加载后角度Js Ng-Route运行脚本

1 个答案: