Question

我正在创建一个网络应用，其中有多个对话框窗口由ng-repeat设置指令<make-dialog>。特定于每个对话框的信息（宽度，高度，位置等）存储在控制器的数组中，并作为范围变量传递给指令。

现在，我想添加一个布尔范围变量，可以通过所有对话框窗口进行访问和修改。所以当你点击＆＃34; +＆＃34;在任何对话框中的按钮，范围变量更改为＆＃34; true＆＃34;，并且所有其他对话框都识别出已进行了更改。

这是我尝试过的代码草图：

控制器：

angular.module('root', [])
.controller('index', ['$scope', function($scope){
$scope.dialogs = [
  {
    minimized: false,
    maximized: false,
    width: 200,
    height: 300,
    top: 5,
    left: 5,
    zindex: 1,
    template: 'experiment-dialog.html'
  },

  {
    minimized: false,
    maximized: false,
    width: 200,
    height: 250,
    top: 257,
    left: 238,
    zindex: 0,
    template: 'other-dialog.html'
  }];

$scope.bool = false; //The variable I want to be able to access and change

}]);

指令：

.directive('makeDialog', function($document) {
return {
    restrict: 'E',
    scope: {
        model: '=',
        dialogs: '=',
        bool: '='
    },
    template: "<button ng-click='maximize()> + </button>'",
    link: function(scope, element, attrs) {

        scope.maximize = function() {
            scope.bool = true;
        }
    }
   }
 });

的index.html：

 <html>
  <body ng-app='root' ng-controller='index'>
    <div id='container'>
      <div ng-repeat='dialog in dialogs|filter:{minimized:false}'>
        {{bool}}
        <make-dialog model='dialog' dialogs='dialogs' bool='bool'></make-dialog> 
      </div>
    </div>
  </body>
 </html>

这会在屏幕上显示两个按钮和单词＆＃34; false false＆＃34;。但是当我点击其中一个＆＃34; +＆＃34;按钮，只有一个的＆＃34; false＆＃34;值更改为true。所以这个变量不是全局的，但只能通过一个对话框看到。有没有办法解决这个问题，所以单击一个按钮会使两个对话框都意识到变量现在是真的吗？

Answer 1

检查工作演示：Plunker

你的问题是你将模型绑定到一些原始变量里面 ng-repeat：

ngRepeat指令从集合中为每个项目实例化一次模板。每个模板实例都有自己的范围

因此，使用一些对象来执行双向绑定。

＆＃34;全球＆＃34; AngularJS中{ng-repeat}中的变量

1 个答案: