Question

我在MVC中有一个母版页和子页面

所有Js文件都包含在母版页中。现在在子页面中我有两个下拉列表，它们与ajax返回的数据绑定。

我可以看到数据正在选择选项中填充，但实现了css未创建。

HTML

<select data-ng-init="getAllItems()"  ng-model="Item[0]" ng-options="Item['title'] for Item in Items track by Item['id']">

AJAX

$scope.getAllItems = function () {
        var result = ItemsFactory();
        result.then(function (result) {

            if (result.success) {
                $scope.Items= (result.data);
            }
        });
    }

我用过

$('select').material_select()

在最后包含在母版页上的js文件中

所以我的想法是我使用 $（'select'）的JS。在下拉人群之前加载了material_select（），但是我已经把它包含在最后了，

我管理以使其发挥作用

 $scope.getAllItems = function () {
                var result = ItemsFactory();
                result.then(function (result) {

                    if (result.success) {
                        $scope.Items= (result.data);
                        $('select').material_select()
                    }
                });
            }

  $scope.$apply($scope.getAllItems ());

但在控制台上我收到错误的 [$ rootScope：inprog]

任何建议。

由于

Answer 1

所以，你有两种方式：

1）将您的选择初始化放在then功能中。 不是好方法

  $scope.getAllItems = function () {
    var result = ItemsFactory();
    result.then(function (result) {

        if (result.success) {
            $scope.Items= (result.data);

            $('select').material_select();

            $scope.$apply();
        }
    });
}

2）制作一个包裹.material_select()的指令。 更好的方式

    .directive('materialSelect', [function(){

       return {
           restrict: 'E',
           scope: {
               items: '='
           },
           link: function(scope, elem attrs) {

              elem.material_select()

           }

       }

    }])

  <material-select items="items"></material-select>

<强>更新

 $scope.getAllItems = function () {
            var result = ItemsFactory();
            result.then(function (result) {

                if (result.success) {
                    $scope.Items= (result.data);
                    $('select').material_select()

                    $scope.$apply()
                }
            });
        }

  $scope.getAllItems ();

在ajax调用之后，在Angular js中实现Dropdwon

1 个答案: