兌現Dropdwon在角JS Ajax調用

Question

後，我有

所有的JS文件都包含在子頁面主page.Now母版頁和子頁面的MVC

我有被使用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文件

，在年底包括母版頁上，

所以我的想法就是我使用$（「選擇」）的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]

任何suggestio ñ。

感謝

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> 

UPDATE

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

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

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

    $scope.getAllItems();