如何創建受限制的指令？

我正在嘗試使用AngularJS和NG-Table，但無法解決以下問題：如何創建受限制的指令？

我正在NG表中顯示Django應用程序中User對象的集合。該模型的其中一個屬性是布爾值，指示對象是否處於活動狀態。爲了代替true/false，我想使用AngularJS指令從Font Awesome集合中顯示字形。

從各種樣品我有以下。

模塊：

var main = angular.module("main", ["ngTable"]);

的對象的檢索到顯示在表：

main.factory('User', function ($http) { 
    return { 
     async: function() { 
      var promise = $http.get('api/v1/users').then(function (response) { 
       return response.data["objects"]; 
      }); 
      // Return the promise to the controller 
      return promise; 
     } 
    }; 
});

控制器和該指令爲布爾變換字形：

main.controller("UsersCtrl", function ($scope, $filter, ngTableParams, User) { 
    User.async().then(function(data) { 
     $scope.tableParams = new ngTableParams({ 
      page: 1, 
      count: 4, 
      sorting: { 
       name: 'asc' 
      } 
     },{ 
      total: data.length, // length of data 
      getData: function ($defer, params) { 
       // use build-in angular filter 
       var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data; 
       $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); 
      } 
     }); 
    }); 
}).directive('boolean', function() { 
    return { 
     restrict: 'E', 
     link: function (scope, elem, attrs) { 
      var userObject = scope.userObject; 
      if (userObject["active"]) { 
       console.log("active"); 
       console.log(elem); 
       elem.html = "<i class='fa fa-check text-success fa-lg'></i>"; 
      } else { 
       console.log("not active"); 
       console.log(elem); 
       elem.html = "<i class='fa fa-times text-danger fa-lg'></i>"; 
      } 
     } 
    } 
});

然後在我的HTML模板中：

<table ng-table="tableParams" class="table"> 
     <tr ng-repeat="propertyObject in $data"> 
      <td data-title="'Name'" sortable="'name'"> 
       [[ userObject.name ]] 
      </td> 
      <td> 
       <boolean>[[ userObject.active ]]</boolean> 
      </td> 
     </tr> 
    </table>

由於與Django模板約定相沖突，我不得不將Angular的默認雙花括號更改爲方括號。

該表格顯示正常，但對於我的boolean directive無法顯示字形，仍然只顯示true或false。通過登錄到控制檯，我可以檢查實際的對象，並且它們顯示正確。我明顯錯過了一些東西，但將不勝感激任何幫助...

來源

2013-12-12 Roger

您正在運行的問題，你需要讓ng-repeat完成它的消化之前，試圖操縱元素HTML。有幾種方法可以使用attrs.$observe或$timeout。

Baasically正在發生的事情是元素呈現

之前並不比你正在做的，你可以簡單地使用ng-class更重要的是，你會不會需要一個指令

<table ng-table="tableParams" class="table"> 
    <tr ng-repeat="propertyObject in $data"> 
     <td data-title="'Name'" sortable="'name'"> 
      [[ userObject.name ]] 
     </td> 
     <td> 
      <i class='fa fa-times fa-lg' 
      ng-class="{'text-danger':!userObject.active,'text-success':userObject.active}"> 
      </i> 
     </td> 
    </tr> 
</table>

你的代碼是射擊或者你真的可以簡化指令，只返回<i>作爲template使用ng-class

來源

2013-12-12 01:56:23 charlietfl

完美的作品。謝謝！ – Roger

如何創建受限制的指令？

回答

相關問題