javascript - Ng-view on load 事件

Question

我是 Angular js 的新手。我正在尝试创建 SPA。下面是我的 index.html

<div  ng-view>

            </div>

我有一个局部 View 和它的 Controller

myApp.controller('MainController', function ($scope, $http) {

}

还有我的部分看法

<accordion-group heading="EMPLOYER">

                        <select class="employer" multiple data-size="5" data-max-options="3" data-live-search="true" ng-model="employer" ng-options="emp for emp in Employers"  >
                        </select>
                        <button ng-click="addField('employer',employer)">Add Field</button>

                    </accordion-group>
                </accordion>

问题来了。 IU 想将 CSS 应用到 “雇主” 类。就像我有很多类(class)，我正在使用 Bootstrap select。

 $('.employer').selectpicker({
                     style: 'btn-info',
                     dropupAuto: false
                 });

我想在局部 View 加载事件中使用上面的代码。我怎样才能做到这一点 ？

请问有人能帮帮我吗？

谢谢，

Answer 1

您必须将该 jquery 调用包装在一个 Angular Directive(指令)中。 https://docs.angularjs.org/guide/directive

mainApp.directive('mySelectPicker', function () {
    'use strict';

    return {
        restrict: 'A',
        link : function (scope, element, attrs) {

             $(element).selectpicker({
                style: 'btn-info',
                dropupAuto: false
             });
        }
    };
});

然后像这样更新 html:

<select my-select-picker class="employer" multiple data-size="5" data-max-options="3" data-live-search="true" ng-model="employer" ng-options="emp for emp in Employers"  ></select>