从范围内绑定动态控制器 [英] Dynamic controllers bound from scope

问题描述

我想根据我从后端接收到的数据来创建组件动态。我们的目标是要显示我的申请的部分，而不使用服务器端模板：代替显示部件服务器端，服务器发送含有应显示部件JSON数据

下面是我到目前为止有：

VAR模块= angular.module（'testApp'，[]）;module.controller（CTRL1'，['$范围'，函数（$范围）{
    $ scope.test =测试1;
}]）
.controller（'CTRL2'，['$范围'，函数（$范围）{
    $ scope.test =测试2;
}]）
.controller（'ComponentsController'，['$范围'，函数（$范围）{
    //这是JSON由后端返回
    $ scope.components = [{
        名称：WD1
        控制器：CTRL1
    }，{
        名称：WD2
        控制器：CTRL2
    }];    $ scope.test =测试;
}]）;


和我的看法：

＆LT; D​​IV NG-应用=testApp＆GT;
    ＆LT; D​​IV NG控制器=ComponentsController＆GT;
        ＆LT; D​​IV NG重复=，在组件组件＆GT;
            ＆所述p为H.; {{component.name}} - {{component.controller}}＆下; / P＆GT;
        ＆LT; / DIV＆GT;        ＆LT; D​​IV NG重复=，在组件组件＆GT;
            ＆下，P纳克控制器=component.controller＆GT; {{测试}}＆下; / P＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;


不过，我得到以下错误：

  

错误：参数'component.controller不是一个函数，得到了串

我试着写一个指令，编译期间指定控制器名称，但因为它是编译过程中完成，它不绑定...

工作

下面是一个小提琴： http://jsfiddle.net/mathieu/bTQA5/

解决方案

您可以使用下面的指令，它会插入基于名称的控制器：

  VAR模块= angular.module（'testApp'，[]）;模
.directive（'dynamicController'，['$控制器，函数（$控制器）{
    返回{
            限制：'A'，
            适用范围：真，
            链接：功能（范围，元素，ATTRS）{                VAR当地人= {
                    $适用范围：适用范围，
                    $ element：元素，
                    $ ATTRS：ATTRS
                };                element.data（'$控制器'，$控制器（范围$的eval（attrs.dynamicController），当地人））;
            }
        };
    }
]）
 

\r

\r

VAR模块= angular.module（'testApp'，[]）;\r
\r
模\r
  .directive（'dynamicController'，['$控制器，\r
    功能（$控制器）{\r
      返回{\r
        限制：'A'，\r
        适用范围：真，\r
        链接：功能（范围，元素，ATTRS）{\r
\r
          VAR当地人= {\r
            $适用范围：适用范围，\r
            $ element：元素，\r
            $ ATTRS：ATTRS\r
          };\r
\r
          element.data（'$控制器'，$控制器（范围$的eval（attrs.dynamicController），当地人））;\r
        }\r
      };\r
    }\r
  ]）\r
\r
.controller（CTRL1'，['$范围'，\r
    功能（$范围）{\r
      $ scope.test =测试1;\r
    }\r
  ]）\r
  .controller（'CTRL2'，['$范围'，\r
    功能（$范围）{\r
      $ scope.test =测试2;\r
    }\r
  ]）\r
  .controller（'ComponentsController'，['$范围'，\r
    功能（$范围）{\r
      $ scope.components = [{\r
        名称：WD1\r
        控制器：CTRL1\r
      }，{\r
        名称：WD2\r
        控制器：CTRL2\r
      }];\r
\r
      $ scope.test =测试;\r
    }\r
  ]）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.4.2/angular.min.js\"></script>\r
\r
＆LT; D​​IV NG-应用=testApp＆GT;\r
  ＆LT; D​​IV NG控制器=ComponentsController＆GT;\r
    ＆LT; D​​IV NG重复=组件中的成分动态控制器=component.controller＆GT;\r
      ＆所述p为H.;＆下;跨度＆GT; {{测试}}＆下; /跨度＆GT;\r
      ＆所述; / P＆GT;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

I would like to create "components" dynamically, based on data received from my backend. The goal is to display parts of my application, without using server side templating : instead of displaying components server-side, the server sends JSON data containing which components should be displayed.

Here is what I've got so far :

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

And my view :

<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>

However, I get the following error :

Error: Argument 'component.controller' is not a function, got string

I tried to write a directive, assigning controller names during compile, but as it is done during compile, it doesn't work with binding...

Here is a fiddle : http://jsfiddle.net/mathieu/bTQA5/

解决方案

You can use the following directive which will insert a controller based on a name:

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>

这篇关于从范围内绑定动态控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！