Question

页面上有一些项div：

<body>
<div id="block">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="modal"></div>
</body>

在所有项目之后有一个模态块class="modal"。

我希望点击.item后显示模态块，为此，我在父块ng-controller="BlockController"添加了id="block"：

<div id="block" ng-controller="BlockController">
   ...
</div>

在模态块中有一些按钮，我希望在控制器Block Controller上添加方法实现，但是模态不在可见控制器的边界。

我可以将相同的控制器添加到：<div class="modal" ng-controller="BlockController"></div>以在一个控制器中创建通用功能吗？我试过这样做，但在这种情况下遇到可见$scope变量的问题：

AnJS

$scope.ClickSpam = function (id, type){
   $scope.id = id; // have value id
}

模板HTML：

{{id}} // here is not displayed value

Answer 1

您可以做的一个解决方案是为您的模态使用另一个包含其自身功能的控制器

<div class="modal" ng-controller="ModalController"></div>

现在，在BlockConroller内，你仍然可以像$scope那样访问ModalController {/ 1}}：

angular.element($(".modal")).scope(); // returns ModalController's $scope

请注意，如果您有多个模态，则必须在模态上使用id 与不同的控制者。

你的代码就像这样：

HTML代码：

<div class="modal" id="modalId" ng-controller="ModalController"></div>

javascript代码：

angular.element($("#modalId")).scope(); // returns ModalController's $scope

您可能会发现另一个问题，那就是您从BlockController更改了一个ModalController范围的变量，如下所示：

angular.element($(".modal")).scope().id = "something";

除非您调用{{ id }}方法，否则$apply绑定将无效：

angular.element($(".modal")).scope().$apply()

如何在页面中正确定位控制器AngularJS？

1 个答案: