Question

我正在创建一个包含十几个问题类型的调查问卷＆＃39; （多项选择，滑块，检查所有适用的内容等）

每个响应类型的定义基本上都存储为db中的键值对。例如：

多项选择响应类型

设置（一次性小部件特定属性）：

[0]键：＆＃39;选项数量＆＃39;，值：3

[1] key：＆＃39;选择类型＆＃39;，值：＆＃39; radio＆＃39;

选项（n个大小的选项数组）：

[0]键：＆＃39;红色＆＃39;，值：1

[1]键：＆＃39;黄色＆＃39;：值：2

[2] key：＆＃39; blue＆＃39;：value：3

滑块响应类型

设置（一次性小部件特定属性）：

[0]键：＆＃39;最小值＆＃39;，值：1

[1] key：＆＃39; Maximum＆＃39;，value 10

选项（n个大小的选项数组）：

（没有选项）

请注意，每种响应类型都需要使用唯一设置来告诉它如何构建此窗口小部件。（滑块需要＆＃39;滴答数＆＃39;值，多项选择需要n个大小的文本标签数组）

所以我需要一个针对每种响应类型的HTML片段 - 我想 - 每个人都需要自己的控制器。

在我的问题页面视图中：我加载了这样的模板：

 <div ng-include src="vm.getResponseTemplate(vm.question.responseType)"></div>

给我一个网址：

＆＃34;问题/响应/滑块template.html＆＃34;

＆＃34;问题/响应/选择题-template.html＆＃34;

我的问题是，因为我需要每个控制器的控制器，我该如何加载它？它需要访问页面的父控制器，因为它保存了所有设置。

我看过嵌套的控制器，但我并不完全确定在我的情况下我是如何实现的。

我可以在问题页面添加类似的行来加载脚本吗？

<script src="questions/responses/slider-controller.js"></script>

如果是这样，滑块控制器包含什么？＆＃34;

问题页面的控制器如下所示：

(function () {
    appModule.controller('tenant.views.questions.index', [
        '$scope', 'abp.services.app.survey',
        function ($scope, surveyService) {
            var vm = this;        }
    ]);
})();

我做...

(function () {
    appModule.controller('tenant.views.questions.responses.slider'...

我的意思是，我可以设置它，但现在它的范围限定在特定的控制器上，并且无法访问父控制器。

Answer 1

由于您使用ng-include来包含模板，因此概念将类似于

<div ng-controller="ParentCtrl">
    // Template 1
    <div ng-controller="SliderCtrl">
    </div>
    // Template 2
    <div ng-controller="MultipleChoiceCtrl">
    </div>
</div>

与

相同

<div ng-controller="ParentCtrl">
    // Template 1
    <ng-include="'slider-template.html'"/>
    // Template 2
    <ng-include="'multiple-choice.html'"/>
</div>

您只需在所包含的每个模板中添加ng-controller，如下面的示例

<强>滑块template.html

<div ng-controller="sliderCtrl">
   // setup your code
</div>

<强>选择题-template.html

<div ng-controller="MultipleCtrl">
   // setup your code
</div>

并在js控制器中定义了控制器

Js控制器

(function () {
    appModule.controller('ParentCtrl', [
        '$scope', 'abp.services.app.survey',
        function ($scope, surveyService) {
            var vm = this;        }
    ]).controller('SliderCtrl', [
        '$scope', 'abp.services.app.slider',
        function ($scope, surveyService) {
            var vm = this;        }
    ]).controller('MultipleCtrl', [
        '$scope', 'abp.services.app.slider',
        function ($scope, surveyService) {
            var vm = this;        }
    ]);
})();

Answer 2

这令人沮丧。当我把它吐出到控制台时，我可以看到我对象中的属性：

var vmChild = this;
vmChild.parent = $scope.$parent;
console.log(vmChild)

Object:  parent > m > $parent > vm > responseValue > Array[1] > 3

3 是我父母控件中的实际值。这是我想要阅读的价值。

我甚至可以这样做

console.log($scope.$parent.$parent);

并向下钻取我的值：

vm > responseValue > Array[1] > 3

然而，当我这样做时：

console.log(vmChild.parent.$parent.vm);

我明白了：

vm > responseValue > Array[0]

Answer 3

我认为你错过了angularjs主要概念的目的。你应该使用指令。

假设您的表单正在使用控制器FormCtrl和模板form.html，然后在form.html中您可以执行以下操作：（为简单起见，让我们假设你在FormCtrl中有一个方法告诉每个小部件它们是什么。例如whatAmI（设置）等。另一种获取设置的方法 - 好吧也许这是不必要的）

<form>
<div ng-repeat="setting in ctrl.settings">
    <my-checkbox ng-if="ctrl.whatAmI(setting) == 'checkbox'" 
        config="ctrl.getMyConfig(setting)"><my-checkbox>
    <!-- ... and so on -->
</div>
</form>

所以，现在，如果您需要将指令的属性更新到外部作用域，一个好的方法是在指令中创建一个隔离的作用域，并对需要更新的属性使用双向绑定向上。然后给出指令这个属性作为属性（免责声明，如果你计划在不久的将来将某些时间升级到angular2，那么你应该避免双向绑定，并使用＆amp; -binding，但......它＆＃39 ;不像双向绑定那么直接......这是一个很难的选择）

这样的事情：

<my-checkbox property1="ctrl.property1"....></my-checkbox>

在指令中：

myMod.directive('myCheckbox', {
  restrict: 'EA',
  scope: {}, // Use an isolated scope
  controller: 'MyDirectiveController',
  bindToController: {
    config: '@', // this is a 1-way binding (see note below)
    property1: '=' // define 2-way-binding with the '='
  },
  controllerAs: 'my-ctrl', // controller's name on our template
  templateUrl: 'my-checkbox.html'
});

注意：如果您只想将内容从顶部传递给指令，那么您不需要双向绑定，单向绑定是正确的做法（@）...这里的问题是，当使用单向绑定时，变量将作为字符串传递，因此您必须将您的stringyfied配置解析回实际变量，例如JSON。最后，它可以在每个摘要周期中保存一些性能，但您也可以使用双向绑定来简化操作....我猜这个决定还取决于数量。

另一方面，如果你不知道在ng-repeat循环中想要传递给my-checkbox指令的FormCtrl的哪个属性，那么我会简单地给它提供属性。配置，FormCtrl中的getMyConfig（）方法必须添加。这也意味着你必须对bindToScope上的config属性使用双向绑定。

使用角度子控制器进行部分视图？

3 个答案: