Menu
Plunker link : http://plnkr.co/edit/j7BeL72lwHISCIlwuAez?p=preview
In the above link I am using $scope to pass data. But I want to use the model approach and replace $scope.data in MainController to this.data
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['$scope',
function($scope) {
$scope.data = [{
time: '8/19/2014',
id: 123,
text: 'first'
}, {
time: '8/18/2014',
id: 456,
text: 'second'
}, {
time: '8/17/2014',
id: 123,
text: 'third'
}];
}
]);
app.directive('scrollGrid', [
function() {
return {
restrict: 'AE',
scope: {
data: '='
},
templateUrl: 'mainScroll.html',
controller: 'gridController',
controllerAs: 'gridCtrl'
}
}
]);
app.controller('gridController', ['$scope',
function($scope) {}
])
499
You can read more about the 'Controller as syntax' here: http://toddmotto.com/digging-into-angulars-controller-as-syntax/
Please note this syntax was introduced in angular 1.2. Your plunkr was using angular 1.0.x.
Here is example plunkr: http://plnkr.co/edit/5ddLyuRlyCt4PqulpOJG
The markup has been modified like this:
<body ng-controller="MainCtrl as ctrl">
{{ctrl.data}}
<scroll-grid data="ctrl.data"></scroll-grid>
</body>
The controller has been modified like this:
app.controller('MainCtrl', function() {
this.data = [
{
time: '8/19/2014',
id : 123,
text : 'first'
},
{
time: '8/18/2014',
id : 456,
text : 'second'
},
{
time: '8/17/2014',
id : 123,
text : 'third'
}
];
});
Let me know if still encounters problems
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
