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>");
 }]);

私のディレクティブはテンプレートに基づいており、テンプレートには 2 つの変数{{hrefValue}}と{{linkValue}}、ディレクティブのリンク関数内で処理する値があります。私に問題を引き起こしているのは{{linkValue}}、列定義によると、linkDescription 属性が定義されていない場合、列フィールド属性を値として取り、それ以外の場合は linkDescription になります。

ディレクティブは、ほとんどすべてのデータで正常に機能します。変数でわかるように、$scope.dataGrid連想配列の配列があります。jsfiddle を確認すると、3 列目が 2 列目と同様に (linkDescription ではなく) 列フィールドの内容を表示するように定義されていることがわかりますが、この場合、実行時にリンクが表示されません。コードを確認したところ、問題はフィールド自体に関連していることがわかりました。2 列目のフィールドは ですDescriptionが、3 列目はLocation.Name(dataGrid のように) です。その「ネストされた変数」（Location.Name）が問題を引き起こしているものです。

ディレクティブをすべてのタイプのフィールド ( Simple asDescriptionまたはNested as )で機能させる方法を見つけようとしていますLocation.Name。私が欠けているものを知っていますか？どんなアイデアでも役に立ちます。

ありがとう ！

4

2 に答える 2

1

JavaScript はそのような構造を許可しません (これは良いものです):

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

'one'と'one.two'はハッシュ テーブルに格納されているキーが異なるためです。

幸いなことに、angularjs は$parseそのような操作を提供します。http://jsfiddle.net/s7gn8/4/

于 2013-11-01T11:11:12.397 に答える