1

バックエンドから受信したデータに基づいて、「コンポーネント」を動的に作成したいと考えています。目標は、サーバー側のテンプレートを使用せずに、アプリケーションの一部を表示することです。コンポーネントをサーバー側で表示する代わりに、サーバーは表示するコンポーネントを含む JSON データを送信します。

ここに私がこれまでに持っているものがあります:

var module = angular.module('testApp', []);

module.controller('Ctrl1', ['$scope', function ($scope) {
    $scope.test = "test 1";
}])
.controller('Ctrl2', ['$scope', function ($scope) {
    $scope.test = "test 2";
}])
.controller('ComponentsController', ['$scope', function ($scope) {
    // this is JSON returned by backend
    $scope.components = [{
        name: "Wd1",
        controller: "Ctrl1",
    }, {
        name: "Wd2",
        controller: "Ctrl2",
    }];

    $scope.test = "test";
}]);

そして私の見解：

<div ng-app="testApp">
    <div ng-controller="ComponentsController">
        <div ng-repeat="component in components">
            <p>{{component.name}} - {{component.controller}}</p>
        </div>

        <div ng-repeat="component in components">
            <p ng-controller="component.controller">{{test}}</p>
        </div>
    </div>
</div>

ただし、次のエラーが表示されます。

エラー: 引数 'component.controller' は関数ではありません。文字列を取得しました

コンパイル時にコントローラ名を代入してディレクティブを書こうとしたのですが、コンパイル時に行われるため、バインディングでは動作しません...

ここにフィドルがあります：http://jsfiddle.net/mathieu/bTQA5/

4

3 に答える 3

0

名前に基づいてコントローラーを挿入する次のディレクティブを使用できます。

var module = angular.module('testApp', []);

module
.directive('dynamicController', ['$controller', function($controller) {
    return {
            restrict: 'A',
            scope: true,
            link: function (scope, element, attrs) {

                var locals = {
                    $scope: scope,
                    $element: element,
                    $attrs: attrs
                };

                element.data('$Controller', $controller(scope.$eval(attrs.dynamicController), locals));                       
            }
        };
    }
])


var module = angular.module('testApp', []);

module
  .directive('dynamicController', ['$controller',
    function($controller) {
      return {
        restrict: 'A',
        scope: true,
        link: function(scope, element, attrs) {

          var locals = {
            $scope: scope,
            $element: element,
            $attrs: attrs
          };

          element.data('$Controller', $controller(scope.$eval(attrs.dynamicController), locals));
        }
      };
    }
  ])

.controller('Ctrl1', ['$scope',
    function($scope) {
      $scope.test = "test 1";
    }
  ])
  .controller('Ctrl2', ['$scope',
    function($scope) {
      $scope.test = "test 2";
    }
  ])
  .controller('ComponentsController', ['$scope',
    function($scope) {
      $scope.components = [{
        name: "Wd1",
        controller: "Ctrl1",
      }, {
        name: "Wd2",
        controller: "Ctrl2",
      }];

      $scope.test = "test";
    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>

<div ng-app="testApp">
  <div ng-controller="ComponentsController">
    <div ng-repeat="component in components" dynamic-controller="component.controller">
      <p><span>{{test}}</span>
      </p>
    </div>
  </div>
</div>

于 2015-10-02T08:30:54.493 に答える
0

文字列ではなく、コントローラー名を指定するだけです:

function ComponentsController($scope) {
    $scope.components = [{
        name: "Wd1",
        controller: Ctrl1,
    }, {
        name: "Wd2",
        controller: Ctrl2,
    }];

    $scope.test = "test";
}
于 2013-07-21T18:13:19.300 に答える