0

希望你还好！

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

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

我一直在尝试寻找一种方法来使我的指令适用于所有类型的字段（Simple asDescription或Nested as Location.Name）。你知道我错过了什么吗？任何想法都会有所帮助。

谢谢 ！

4

2 回答 2

1

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

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

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

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

于 2013-11-01T11:11:12.397 回答
1

您将不得不使用$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-01T11:13:27.003 回答