Angular JS中的綁定問題（嵌套變量）

好吧，基本上我的問題是關於綁定一個嵌套變量。正如你在我的jsfiddle中看到的那樣，我有一個表格，我需要在它的每一列都有動態鏈接。因此，我創建了一個指令，它可以創建一個href元素，這取決於填充表的數據以及表列的定義。

這是HTML代碼：

<table ng-controller="MyCtrl" border=1 width="100%"> 
     <tr ng-repeat="item in dataGrid"> 
       <td ng-repeat="itemColumn in columnDefs" width="30%" style="text-align: center"> 
        <link-cell-template columnitem="itemColumn" parentitem="item" /> 
       </td> 
     </tr> 
    </table>

這是指令代碼：

myApp.directive('linkCellTemplate', function ($compile, $templateCache) { 
     return { 
      restrict: 'E', 
      require: '?ngModel', 
      replace: true, 
      transclude: false, 
      scope: { 
       columnitem: '=', 
       parentitem: '=' 
      }, 
      link: function (scope, element, attrs, ngModelCtrl) { 
       scope.hrefValue = angular.isDefined(scope.columnitem.linkUrl) ? scope.columnitem.linkUrl : ""; 
       scope.linkValue = angular.isDefined(scope.columnitem.linkDescription) ? scope.columnitem.linkDescription : scope.parentitem[scope.columnitem.field]; 
       // Append the HTML Layout in the Element 
       element.append($compile($templateCache.get('linkCellTemplate.html'))(scope)); 
      } 
     }; 
}).run(["$templateCache", function ($templateCache) { 
     $templateCache.put("linkCellTemplate.html", 
      "<a href=\"{{hrefValue}}\" role=\"button\" style=\"cursor: pointer;\">{{linkValue}}</a>"); 
}]);

我的指令是基於一個模板，在模板我有兩個變量{{hrefValue}}和{{linkValue}}我在指令的鏈接函數內處理了哪些值。給我帶來麻煩的是{{linkValue}}，根據列定義，如果沒有定義linkDescription屬性，它會將列字段屬性作爲值，否則它將是linkDescription。

該指令可以很好地處理幾乎所有的數據。正如你在$scope.dataGrid變量中看到的那樣，我有一組相關數組。如果您檢查jsfiddle，您會發現第三列被定義爲顯示列字段內容（而不是鏈接描述）作爲第二列，但在這種情況下，運行鏈接時不顯示。在檢查代碼後，我發現問題與該領域本身有關。在第二列中，該字段爲Description，但第三列爲Location.Name（因爲它位於dataGrid中）。該「嵌套變量」（Location.Name）是提供該問題的那個。

我一直在試圖找到我怎樣才能使我的指令適用於所有類型的字段（簡單爲Description或嵌套作爲Location.Name）的方式。你知道我錯過了什麼嗎？任何想法都會有所幫助。

謝謝！

來源

2013-11-01 abottoni

對於這種情況（即括號中有複雜表達式），您將不得不使用$parse。這很簡單：

myApp.directive('linkCellTemplate', function ($compile, $templateCache, $parse) { 
    ... 
    scope.linkValue = angular.isDefined(scope.columnitem.linkDescription) ? 
     scope.columnitem.linkDescription 
     // here is the change 
     : $parse(scope.columnitem.field)(scope.parentitem);

來源

2013-11-01 11:13:27

謝謝@Nikos。我不知道'$ parse'。每天都是學習新事物的新天！謝謝！ – abottoni

的JavaScript不允許這樣的構造（這是很好的IMO）：

object['one'].two.three != object['one.two'].three

由於'one'和'one.two'存儲到哈希表中不同的密鑰。

幸運的是，angularjs爲這種操作提供$parse。 http://jsfiddle.net/s7gn8/4/

來源

2013-11-01 11:11:12 werehuman

謝謝@werehuman。我不知道'$ parse'。每天都是學習新事物的新天！謝謝！ – abottoni

Angular JS中的綁定問題（嵌套變量）

回答

相關問題