Passing variable with angular directive
I want to pass a variable through a template to a directive. I even have working examples in my own code, and I can't, for my life, figure out why this sample doesn't work.
I'm sure it's just one character missing - somewhere "@" or "$".
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.foo = 'baz';
}).
directive('myFnord',
function() {
return{
scope: {
foo: '@'
},
link: function(scope, element, attrs) {
console.log('!');
console.log(scope.foo);
}
}
}
);
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 600px;
height: 300px;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div foo='foo' my-fnord>:)</div>
</body>
</html>
And here largeLoad.json
:
[{"name": "Moroni", "allowance": 505050505050505050, "paid": true},
{"name": "Tiancum", "allowance": 53, "paid": false},
{"name": "Jacob", "allowance": 27, "paid": false},
{"name": "Nephi", "allowance": 29, "paid": false},
{"name": "Enos", "allowance": 34, "paid": false},
{"name": "Ether", "allowance": 42, "paid": false},
{"name": "Alma", "allowance": 43, "paid": true},
{"name": "Jared", "allowance": 21, "paid": true},
{"name": "Moroni", "allowance": 50, "paid": true},
{"name": "Tiancum", "allowance": 53, "paid": false},
{"name": "Jacob", "allowance": 27, "paid": false},
{"name": "Nephi", "allowance": 29, "paid": false},
{"name": "Enos", "allowance": 34, "paid": false},
{"name": "Ether", "allowance": 42, "paid": false},
{"name": "Alma", "allowance": 43, "paid": true},
{"name": "Jared", "allowance": 21, "paid": true},
{"name": "Moroni", "allowance": 50, "paid": true},
{"name": "Tiancum", "allowance": 53, "paid": false},
{"name": "Jacob", "allowance": 27, "paid": false},
{"name": "Nephi", "allowance": 29, "paid": false},
{"name": "Enos", "allowance": 34, "paid": false},
{"name": "Ether", "allowance": 42, "paid": false},
{"name": "Alma", "allowance": 43, "paid": true},
{"name": "Jared", "allowance": 21, "paid": true},
{"name": "Moroni", "allowance": 50, "paid": true},
{"name": "Tiancum", "allowance": 53, "paid": false},
{"name": "Jacob", "allowance": 27, "paid": false},
{"name": "Nephi", "allowance": 29, "paid": false},
{"name": "Enos", "allowance": 34, "paid": false},
{"name": "Ether", "allowance": 42, "paid": false},
{"name": "Alma", "allowance": 43, "paid": true},
{"name": "Jared", "allowance": 21, "paid": true},
{"name": "Moroni", "allowance": 50, "paid": true},
{"name": "Tiancum", "allowance": 53, "paid": false}]
+3
source to share