angular.js,javascript中的多个控制器实例

发布时间：2020-12-17 18:03:20 所属栏目：安全来源：网络整理

导读：我有一个由两个相同部分组成的视图,只有内容不同.所以,基本上我想以某种方式为左右两个部分使用一个控制器和一个视图. 我做什么(在 HTML中)： div class="board_body" div class="left_board" ng-controller="leftBoardController" div ng-controller="panel

我有一个由两个相同部分组成的视图,只有内容不同.所以,基本上我想以某种方式为左右两个部分使用一个控制器和一个视图.
我做什么(在 HTML中)：

<div class="board_body">
    <div class="left_board" ng-controller="leftBoardController">
        <div ng-controller="panelController" ng-include="template"></div>
    </div>
    <div class="right_board" ng-controller="rightBoardController">
        <div ng-controller="panelController" ng-include="template"></div>
    </div>
</div>

我将所有初始化逻辑保留在左右控制器中,并使用panelController及其左右部分的视图.在这种情况下,可以共享panelController,因为它使用具有不同值的公共$scope变量(在左侧和右侧控制器中创建变量,因此它们对panelCotrl可见).

angular.module("radar.leftController",[])
.controller("leftController",function ($scope,...) { 
    $scope.data = getSomeData();
}

angular.module("radar.rightController",[])
.controller("rightController",...) { 
    $scope.data = getOtherData();
}

angular.module("radar.panelController",[])
.controller("panelController",...) { 
    $scope.template = "somePath/panelView.html";
    // shared logic for left and right contrls goes here
}

在panelView.html中：

<div>data: {{data.length}}</div>

似乎从右边我可以改变左右变速器,但是从左边我只能改变左变速器(如预期的那样). (我需要左右两部分完全分开).

那么,重用一个控制器(创建多个实例)的正确方法是什么？

解决方法

正确的方法是使用 directives与隔离范围.
然后你的代码看起来像这样：

...
angular.module("radar.panel",[])
.directive("panel",function() {
   return {
    scope: {'panelData': '=' // Doubly bound to panel-data attribute},templateUrl: 'somePath/panelView.html'
    controller: function ($scope,...) { 
      // shared logic for left and right contrls goes here
    }
  }
}

<div class="board_body">
    <div class="left_board" ng-controller="leftBoardController">
        <div panel panel-data="data"></div>
    </div>
    <div class="right_board" ng-controller="rightBoardController">
        <div panel panel-data="data"></div>
    </div>
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!