Question

index.html
<html>
<head>
    <link rel="stylesheet" href="style.css">
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="script.js"></script>

</head>
<body>

<div ng-app="webQueryApp">
    <div ng-controller="TestAppController">
       <div class="operationalArea"  my-Draggable  >  click me </div> 
    </div>
</div>
</body>
</html>

 - 


style.css


.operationalArea {
    background-color: #eeeeee;
    height: 100px;
    width: 100px;
    float: left;
    padding: 5px;
}


app.js

var webQueryApp = angular.module("webQueryApp", [ ]);

        webQueryApp.directive('myDraggable', function(){
        return{
                //link start

                link: function ($scope, element, attrs) {

      element.bind('click', function(event) {
     console.log("element clicked and arr is "+attrs.arr);

  });         
          }

                //link end
        };
        });

webQueryApp.controller('TestAppController', function($scope, $http) {
    var app = this;
    console.log("hello console");
    $scope.arr=[1,2,3,4];

});

你可以在plunker中看到

http://plnkr.co/edit/aabS53ZgjKnrXWu1aFtt?p=preview

我想在custom指令中使用controller arr值。但它说未定义。虽然我不知道我不能拥有桌子的范围。

其他明智地给我一个参考资料，我可以找到解决方案。

Answer 1

从您提供的plunker中，只需将指令范围属性修改为以下

scope: {
   data: '=',
}

您可以通过调用$scope.data

来使用该数组

在AngularJS中从控制器访问变量到自定义指令

1 个答案: