2

私はAngularJSを初めて使用し、現在問題を抱えています。

コントローラーには次のものがあります

//Define the programs list table columns
    $scope.programListColumns = "[{ Name: 'Name'},{ Status: 'Status'},{ CreatedByUserName: 'Created By'},{ ModifiedDate: 'Modified'},{ ModifiedByUserName: 'Modified By'}]";

これをhtmlの要素のカラムマップとして使用したいと思います...

<table-helper datasource="programsList" columnmap="{{programListColumns}}"></table-helper>

私のディレクティブは非常に広範囲ですが、基本的にはデータソースからテーブルを作成し、列マップを使用してそこから必要なデータをマップし、必要に応じて各項目のヘッダーと行を作成します。

ここに私の指示が少し省略されています...

(function(){
var app = angular.module("MdfAngularApp");
var tableHelper = function() {
    //Initiate variables for directive
    //var template = '<div class="tableHelper"></div>',
    var link = function(scope, element, attrs) {
            var headerCols = [],
                tableStart = '<table>',
                tableEnd = '</table>',
                table = '',
                visibleProps = [],
                sortCol = null,
                sortDir = 1;

            //Watch the datasource for changes.
            scope.$watchCollection('datasource', render);

            ... Functions go here ...
return {
        restrict: 'E',
        replace: true,
        scope: {
            columnmap: '@',
            datasource: '='
        },
        link: link,
    } 
};

app.directive('tableHelper', tableHelper);
}());

上記を実行すると、列マップとして空の文字列が取得されます。

今、私がこのようにhtmlを置くと

<table-helper datasource="programsList" columnmap="[{ Name: 'Name'},{ Status: 'Status'},{ CreatedByUserName: 'Created By'},{ ModifiedDate: 'Modified'},{ ModifiedByUserName: 'Modified By'}]"></table-helper>

分離スコープ columnmap プロパティを「=」に変更すると、すべて問題ありません。私はこれよりももう少しカプセル化しようとしています。

どんな助けでも大歓迎です。

4

1 に答える 1

1

私の問題は、列マップをオブジェクトとして解析していなかったことです。それを行い、有効なjsonを提供すると、私のソリューションは機能しました。

于 2016-08-04T00:22:54.197 に答える