Angularjs 一边改变 $scope 参数答案

【问题标题】：Angularjs aside to change $scope paramAngularjs 一边改变 $scope 参数
【发布时间】：2015-10-03 21:09:31
【问题描述】：

我的想法是让模板（用于问题）可以在旁边的元素中选择。

为了在 angularjs 中创建一个 side 元素，我尝试使用 dbtek/angular-aside。这很好用，但我的问题是我必须将模板存储在一个额外的模板文件中，并且我需要更改现有的 $scope 变量（以在表单中设置模板）。

例子：

create_question.html（打开元素和显示模板变量的按钮）

<button type="button" class="btn btn-default btn-lg" ng-click="openAside('left')">
    <span class="glyphicon glyphicon-align-justify"></span> Right
</button>

Choosen template is {{choosenTemplate}}

create_question.js（选择模板的变量，打开元素的函数和更改模板变量的函数）

$scope.choosenTemplate = 0;  // 0 = default

$scope.openAside = function(position) {
  $aside.open({
    templateUrl: 'aside.html'
    placement: position,
    backdrop: true,
    controller: function($scope, $modalInstance) {
      $scope.ok = function(e) {
        $modalInstance.close();
        e.stopPropagation();
      };
      $scope.cancel = function(e) {                  
        $modalInstance.dismiss();
        e.stopPropagation();
      };
    }
  })
};

$scope.setTemplate = function(templateNumber)
{
  $scope.choosenTemplate = templateNumber;
}

aside.html（side 元素的模板 - 内容无关）

<div>
  <button ng-click="setTemplate(2)">Template 2</button>   
</div>

aside 元素已显示，但当我按下按钮时该函数从未被调用。

当我更改为

aside.html

<div ng-controller="CreateQuestionCtrl">
  <button ng-click="setTemplate(2)">Template 2</button>   
</div>

该函数被调用，但现在我有两个不同的 $scopes（我认为）？而且我只能更改错误的 $scope 元素（在旁边）。

另一个尝试是在<script>-元素中设置模板，如下所示：

<script type="text/ng-template" id="aside.html">
  <button ng-click="setTemplate(2)">Template 2</button> 
</script>

并在 create_question.html 中设置此元素，但现在我无法再次调用该函数。

有谁知道我如何在“两个不同的”页面上拥有相同的 $scope？两者都在同一页面上，但我无法真正访问相同的 $scope。

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

可能有更好的方法在主控制器和副控制器之间进行通信，但它可能会按原样工作。

$aside 只是 ui-bootstrap $modal 的封装。上面的例子没有使用scope parameter：

scope - 用于模态内容的范围实例（实际上 $modal 服务将创建一个提供的子范围范围）。默认为 $rootScope

这对于设置模态和父控制器范围之间的关系至关重要。

在做

  $aside.open({
    scope: $scope,
    ...

应该让应用按预期工作。

【讨论】：