2

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

前任。我想添加 selectpicker（引导程序），我可以在其中搜索。但是当我路由该模板时，我可以获得选择器，但它不起作用，其中没有搜索栏。

应用程序.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>
4

1 回答 1

0

它的工作看到这个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;
  };  
});
于 2017-05-10T07:39:58.953 回答