Question

我试图在控制器和指令之间进行通信。我研究了很少的博客和搜索stackoverflow，有一些关于这些主题的精彩概念。但它们都是特定于案例的问题。我尝试以他们的风格解决我的问题，但我发现没有运气。

我的问题是..我需要将一些数组发送到指令。该数组在主html文件的控制器中定义。而html页面也有一个指令。该指令还有自己的控制器来完成一些工作。我需要将一个数组发送到该指令控制器进行处理，并且该数组必须是双向绑定的，以便一方的任何更改都可以反映在另一方。

Answer 1

我最近正在处理这种情况，并找到了解决问题的方法。您可以使用此过程发送数据并在控制器的指令中处理它。首先在主页面中创建一个控制器并定义一些你想要的数组...

app.controller("ctrl", function($scope) {
    $scope.scope = $scope; //this is to transfer the current scope to the directive
    $scope.array = [{
        "a": "vfdxvf",
        "b": "sdc"
    }, {
        "a": "vfdxvf",
        "b": "sdc"
    }, {
        "a": "vfdxvf",
        "b": "sdc"
    }, {
        "a": "vfdxvf",
        "b": "sdc"
    }];
});

上面的代码中，$ scope.scope = $ scope是创建控制器范围的引用。

然后像这样定义指令。它将绑定您想要的所有值。任何一方阵列的任何变化都会反映在另一边。

这是一个虚拟代码..

app.directive("someDirective", function() {
    return {
        restrict: "EA",
        scope {
            array: "=", // two way binding of array..
            scope: '=' // collecting the scope of the controller it came from
        },
        templateUrl: "./templates/test.html",
        controller: function($scope) {
            $scope.newArray = $scope.scope.array;
            //do useful coding with the array... 
        }
    }
});

对于html主页，只需这样写..

<some-directive scope="scope" array="array"></some-directive>

Answer 2

在绑定控制器变量的指令范围中使用 =

app.directive("myDir", function(){
  return{
    scope : {
      myArr : "="
    },
    controller : function($scope){

    },
    link : function(scope, ele, attr){
      scope.myArr.push("C");
    }
  }
});

请参阅https://plnkr.co/edit/pkkaEKBZVEajm5LBf9QD?p=preview

将数据从主html页面控制器发送到指令控制器

2 个答案: