how to access controller data into custom directive
41 views
Skip to first unread message
ajay jaiswal
Oct 9, 2015, 9:31:52 AM10/9/15
to AngularJS
<script>
var webQueryApp = angular.module("webQueryApp", [ ]);
webQueryApp.directive('myDraggable', function(){
return{
scope: {
},
//link start
link: function ($scope, element, attrs) {
element.bind('click', function(event) {
console.log($scope.arr.length);//its saying undefined
console.log($scope.arr);
});
}
//link end
};
});
webQueryApp.controller('TestAppController', function($scope, $http) {
var app = this;
console.log("hello console");
$scope.arr=[1,2,3,4];
});
</script>
how can access arr variable in custom directive
var webQueryApp = angular.module("webQueryApp", [ ]);
webQueryApp.directive('myDraggable', function(){
return{
scope: {
},
//link start
link: function ($scope, element, attrs) {
element.bind('click', function(event) {
console.log($scope.arr.length);//its saying undefined
console.log($scope.arr);
});
}
//link end
};
});
webQueryApp.controller('TestAppController', function($scope, $http) {
var app = this;
console.log("hello console");
$scope.arr=[1,2,3,4];
});
</script>
how can access arr variable in custom directive
Sander Elias
Oct 9, 2015, 10:05:25 AM10/9/15
to AngularJS
Hi Ajay,
Regards
Sander
By making it a property on your element in the view, and put in in your isolate scope.
view:
<my-Dragable data='arr'></my-Dragable>
directive:
function myDragable() {
return {
restruct:'E',
scope: {
'arr': '='
},
link: linkFn
}
function linkFn(scope, elm, attrs) {
attrs.$observe('arr', function () {
console.log(scope.arr);
})
}
Regards
Sander
ajay jaiswal
Oct 9, 2015, 10:47:48 AM10/9/15
to ang...@googlegroups.com
Hi sender thanks for you view but it won't work ,
i am sending my entire code please make ti correct.<html>
<head>
<style>
.operationalArea {
background-color: #eeeeee;
height: 100px;
width: 100px;
float: left;
padding: 5px;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var webQueryApp = angular.module("webQueryApp", [ ]);
webQueryApp.directive('myDraggable', function(){
return{
scope: {
'arr':'=',
},
//link start
link: function ($scope, element, attrs) {
attrs.$observe('arr',function(){
console.log($scope.arr);
});
element.bind('click', function(event) {
console.log("element clicked and arr is "+attrs.arr);
console.log($scope.arr);
});
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];
});
</script>
<div ng-app="webQueryApp">
<div ng-controller="TestAppController">
<div class="operationalArea" my-Draggable data='arr' > click me </div>
</div>
</div>
</body>
</html>
<div ng-controller="TestAppController">
<div class="operationalArea" my-Draggable data='arr' > click me </div>
</div>
</div>
</body>
</html>
--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/uiN9XlVQrMc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
--
Thanks and regards,
Ajay
Sander Elias
Oct 9, 2015, 11:15:46 AM10/9/15
to AngularJS
ajay jaiswal
Oct 10, 2015, 11:44:52 AM10/10/15
to ang...@googlegroups.com
Hi sender,
I have updated the code in plunk.
please check out the code and resolve the issue
i want directly access the arr variable in custom directive.
reply as soon as possible.
thanks
--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/uiN9XlVQrMc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Martin
Oct 11, 2015, 5:52:09 PM10/11/15
to AngularJS
<div class="operationalArea" my-Draggable arr='arr' > click me </div>
Reply all
Reply to author
Forward
0 new messages