Javascript 在angularjs中使用.scope（）时发生了什么？

有人能解释一下我在指令中使用.scope（）时发生了什么吗

我有一个指令，用来创建正方形网格。在加载时，我希望这些方块是可点击的，所以我已经分配了

ng-click="disabled || add($index)"

然后在

链接中：function（）{}

我运行：

scope.add = function (index) {
     scope.disabled = true;
}

这样，所有这些功能在单击时都将被禁用

然后，我有一个服务，它获取一个被点击的框的索引，运行一些逻辑，然后返回其他可能的可点击的方块。该服务返回一个索引数组，例如

[2,5,6,7]

然后，我获取该数组，循环遍历它，并指定这些框通过其索引可单击：

for (var x = 0; x < arr.length; x++) {
    var nScope = el.children().eq(arr[x]).scope();
    nScope.disabled = false;
}

指令的设置如下所示：

return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
        ngModel: '='
    },
    templateUrl: 'scripts/grid/grid.html',
    link: function () {
        //code above goes here
    }
}

---

该服务有各种各样的功能，其中之一是根据最初单击的对象的索引提供可以单击的对象。出于这个问题的目的，我省略了服务代码，因为到目前为止，我唯一的问题是弄清楚.scope（）到底在做什么，以及如何利用它发挥我的优势。

这并不能完全回答您的问题，但可能是一种供您借鉴的方法

看这把小提琴：

var myApp=angular.module（'myApp'，[]）；
myApp.service（'myService'，function（））{
返回{
存储框：函数（id）
{
警报（'将使用id:'+id更新框）；
}
}
});
myApp.directive（'boxgenerator'，['myService'，function（myService）{
返回{
模板：“{status}}”，
范围：{
id:“@id”，
状态：“@status”
},
链接：函数（范围、元素、属性）
{
元素绑定（“单击”，函数（）{
save=myService.saveBox（scope.id）；
scope.status='disabled'；
作用域：$apply（）；
});
}
}
}]);
函数MyCtrl（$scope）{
$scope.box=[]；
$scope.box={status:'enabled'}；
对于（i=0；i<9；i++）
{
$scope.box.push（$scope.box）；
}
}

---

也许你可以用一种更简单的方式进行重构。

我们需要更多的代码，你的初始模型设置是什么？指令是否传递了任何属性？这项服务的目的是什么？我不认为像“disabled”这样的通用名称是范围变量的好主意，它应该是一个属性：a$scope.box={status:“disabled”}。关于您的错误，您的指令可能需要所谓的“隔离范围”。谷歌一些指令教程。谢谢你的回复，我在帖子中添加了更多的代码。谢谢你花时间写出来并提供一个例子。通过在初次单击时禁用所有框（而不仅仅是您单击的框），然后立即启用特定（随机）框，更新您拥有的内容的最佳方法是什么？我问这个问题是因为作用域是隔离的（应该是隔离的），所以在指令中访问全局作用域并在单击发生时禁用所有框的正确方法是什么。一旦发生这种情况，什么才是随机打开另一个的正确方法呢？不客气，指令可能是AngularJS中最难的部分，我还在学习自己。事实上，我在编写示例时学到了一些东西！对于random，您可能有很多普通的JS脚本，无法在JS对象（$scope.box）中获取随机条目。至于初始单击，您可以通过$broadcast（ing）跟踪用户在$rootScope中的初始单击时间。我必须说，很难理解你的应用程序的概念。。。在随机选择框后，禁用框是否仍然可以单击？启用框也可以点击吗？是的，我也试着把我的脑袋绕到它上面。在一个“非常”基本的层面上，这里有一个代码笔示例：有趣的是，我在jQuery中花了5分钟完成了上面的操作。这个角度的解释花了我更长的时间，因为我还没有理解范围。

return {
    restrict: 'A',
    require: 'ngModel',
    scope: {
        ngModel: '='
    },
    templateUrl: 'scripts/grid/grid.html',
    link: function () {
        //code above goes here
    }
}

var myApp = angular.module('myApp',[]);


myApp.service('myService', function() {
    return{
        saveBox: function(id)
        {
        alert('gonna update box with id: '+id);
        }
    }
});


myApp.directive('boxgenerator', ['myService', function(myService) {
    return {
        template: '<div class="box {{status}} -  {{id}}">{{status}}</div>',
        scope:{
            id: '@id',
            status: '@status'
            },
    link : function(scope, element, attrs) 
        {
            element.bind("click",function(){
               save = myService.saveBox(scope.id);
               scope.status = 'disabled'; 
               scope.$apply();
            });
        }
    }
}]);


function MyCtrl($scope) {
    $scope.boxes = [];
    $scope.box = { status: 'enabled' };

    for (i = 0; i < 9; i++)
    {
       $scope.boxes.push($scope.box);
    }
}