Question

希望你没事！

好吧，基本上我的问题与绑定嵌套变量有关。正如您在jsfiddle中看到的那样，我有一张桌子，我需要在每一列中都有动态链接。所以我创建了一个指令，它以dinamically方式创建一个<a> 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}}，我在指令的link函数中处理这些值。给我带来麻烦的是{{linkValue}}，根据列定义，如果未定义linkDescription属性，它将把列字段属性作为值，否则它将是linkDescription。

该指令适用于几乎所有数据。正如您在$scope.dataGrid变量中看到的，我有一组关联数组。如果你检查jsfiddle，你会发现第3列被定义为显示第2列的列字段内容（而不是linkDescription），但在这种情况下，运行它时不显示链接。检查代码后，我发现问题与字段本身有关。在第二列中，字段为Description，但在第三列中为Location.Name（因为它在dataGrid中）。 “嵌套变量”（Location.Name）是给出问题的那个。

我一直试图找到一种方法，让我如何使我的指令适用于所有类型的字段（简单为Description或嵌套为{ {1}}）。你知道我错过了什么吗？任何想法都会有所帮助。

谢谢！

Answer 1

JavaScript不允许这样的构造（这很好用）：

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

因为'one'和'one.two'是存储在哈希表中的不同密钥。

幸运的是，angularjs为这种操作提供了$parse。 http://jsfiddle.net/s7gn8/4/

Answer 2

对于这种情况，您必须使用$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);

Angular JS（嵌套变量）中的绑定问题

2 个答案: