如何访问指令中的包装变量？

Question

我有一个对象，它由多个数组组成：

$scope.myArrays = {
    array1: ['Pizza', 'Spaghetti'],
    array2: ['Lasagne', 'Schnitzel']
};

此外，我有一个自定义指令，我想将此 object myArrays 和 将这些数组绑定到范围变量:

<my-directive my-data="myArrays"></my-directive>

myApp.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            arrayOne: '=myData.array1',
            arrayTwo: '=myData.array2'
        },
        link: function(scope, elem) {
            // get access to scope.array1 and scope.array2
        }
    };
});

All together in a fiddle for you to play around!

有没有办法直接绑定数组，或者我需要绑定 arrays: '=myArrays' 并像 arrays.array1 一样访问它们？

Answer 1

您可以通过将它们分配给 scope 字段来做到这一点：

myApp.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            myData: '='
        },
        link: function(scope, elem) {
            scope.arrayOne = myData.array1;
            scope.arrayTwo = myData.array2;
        }
    };
});

但是，我建议只绑定对象并去掉 link 函数。这样指令代码更短，更易读，更少 "black magic" 发生并且指令中的引用更具表现力：

myApp.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            myData: '='
        }
    };
});

然后你可以在myData.array1指令中引用它。将 '=' 替换为 '=someName' 以将其引用为 someName.array1

Answer 2

绑定必须是一对一的，你不能那样做。是的，您必须访问指令中的数组。

myApp.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            myData: '='
        },
        link: function(scope, elem) {
           scope.arrayOne = scope.myData.array1;
           scope.arrayTwo = scope.myData.array2;
        }
    };
});

如果您不必在 link 函数中处理这些数组并删除它们，您可以直接在指令模板中访问 scope.myData.array1 和 scope.myDate.array2。

Answer 3

您的 HTML 应该是：

<my-directive arrayone="myData.array1" arraytwo="myData.array2"></my-directive>

和你的指令：

myApp.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            arrayOne: '=arrayone',
            arrayTwo: '=arraytwo'
        },
        link:function(scope){
            console.log('arrayOne :',scope.arrayOne);
            console.log('arrayTwo :',scope.arrayTwo);
        },
        controller: function($scope) {
            console.log('arrayOne :',$scope.arrayOne);
            console.log('arrayTwo :',$scope.arrayTwo);
        }
    };
});

Answer 4

Demo

HTML-部分：

<div ng-controller="MyCtrl">
    <my-directive my-data="myArrays" array-one="myArrays.array1" array-two="myArrays.array2">
    </my-directive>
</div>

脚本：

angular.module('myApp', [])

.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            arrayOne: '=',
            arrayTwo: '='
        },
        link: function(scope, elem) {
            // get access to scope.array1 and scope.array2
             //console.log(scope.array1)
             console.log(scope.arrayOne); 
             console.log(scope.arrayTwo);          

        }
    };
})

.controller('MyCtrl', function($scope) {
    $scope.myArrays = {
        array1: ['Pizza', 'Spaghetti'],
        array2: ['Lasagne', 'Schnitzel']
    };
});

如何访问指令中的包装变量？

How to access wrapped variables in a directive?

angularjs

angularjs-directive

angularjs-scope

angular-directive