关于加载事件的Ng视图

时间:2014-12-01 18:01:43

标签: javascript css angularjs twitter-bootstrap

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

<div  ng-view>

            </div>

我有一个局部视图及其控制器

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应用于&#34;雇主&#34; 类。就像我有很多课程,我正在使用 Bootstrap select。

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

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

任何人都可以帮助我吗?

谢谢,

1 个答案:

答案 0 :(得分:1)

您必须将该jquery调用包装在angular指令中。 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>