Question

在我的应用程序中，我可以查看，创建和更新服务器上的项目。当我的页面加载时，我从服务器获取项目并将它们放在一个数组中，我得到每个项目的ID和标题。此数组显示在表中，当单击表中的标题时，我从服务器获取具有该ID的该项的所有属性，并为用户显示它们。

在我的控制器中我有这个：

$scope.currentItem = ({
    title: '',
    id: '',
    description: ''
});

因此，在查看和项目时，我会像这样设置currentItem：

// function to get item

$scope.currentItem = ({
    title: item.Title,
    id: item.Id,
    description: item.Description
});

每个项目也附加了操作，因此当我查看项目时，我也得到了与项目相关的动作，这些动作存储在一个数组中：

// function to get Actions

$scope.actionsArray = Actions;

在我的实际应用程序中，我有更多的对象和几个数组，这只是一个例子。

但是当我完成查看或创建项目时，我应该如何清除这些数组和对象，以便我选择查看或创建另一个项目，我将不会拥有此项中上一项的属性吗？

现在我有这样的功能：

$scope.clearItems = function() {
    $scope.currentItem = ({
        title: '',
        id: '',
        description: ''
    });
    $scope.actionsArray = [];
};

我在创建，更新和查看项目后调用此函数。但我仍然觉得好像这些不同的项目并没有彼此隔离，就像在一些罕见的情况下它们的属性可能混淆，如果我选择更新，创建和读取大量项目而不刷新页面，这是我想要实现的目标。

所以我的问题很简单，如何在角度中实现'对象隔离'？

Answer 1

您可以隔离指令中的每个项目，然后隔离指令范围。角度很容易做到。

主控制器中有一系列项目对象：

$scope.items = [{id:1,title:'title',description:'desc'},...];
$scope.aFunction = function(a,b){return a+b};

主HTML文件

<my-item data="item" func='aFunction' ng-repeat="item in items"></my-item>

然后创建一个指令

app.directive('myItem',function(){
    return{
        restrict:'E',
        scope:{        //This is what makes your directive scope isolated
            data:'=',  //Think of each attribute as a pipe for data
            func:'&'
        },
        template:'<p>item {{data.id}} : {{data.title}} -> {{data.description}}</p>',
        controller:function($scope){
            // here you can you $scope.data 
            // that contain a reference to your item
            // and the scope is isolated from the others
            // so there is no mixup concerns
            // you can also use $scope.func as a function 
            // in your private scope
        }
    };
});

您现在可以单独操作每个项目，并通过对主控制器中的$scope.items变量进行操作来一起管理它们。

编辑：
重要的是要知道：当您在隔离范围内使用$scope.data时，每个数据属性就像是对项目属性的直接引用。
在您的隔离范围内，您必须仅修改$scope.data属性，并且永远不会直接更改$scope.data，否则您将创建项目的本地和隔离副本，并且会破坏参考。
例如，您希望将布尔值传递给隔离范围，然后从隔离范围中修改它：

这是在您的主控制器中

$scope.boolean = true;
$scope.anotherBoolean = {value:true};

这是您的HTML文件

<my-item bool="boolean" anotherbool="anotherBoolean"></my-item>

并在你的指令中

app.directive('myItem',function(){
    return{
        restrict:'E',
        scope:{
            bool:'=',
            anotherbool:'='
        },
        controller:function($scope){
            //this will break the reference and create a local isolated copy of $scope.bool
            $scope.bool = false;
            //this will not
            $scope.anotherbool.value = false
        }
    };
});

将对象彼此隔离，angularjs

1 个答案: