使用角度指令传递变量

时间:2014-12-17 19:20:34

标签: javascript angularjs

我想通过模板将变量传递给指令。我甚至在我自己的代码中得到了工作示例,而且在我的生活中,我不能弄清楚为什么这个样本不起作用。

我确定只缺少一个角色 - ' @'或者' $'某处。



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>
&#13;
&#13;
&#13;

这里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}]

1 个答案:

答案 0 :(得分:0)

在您的指令中,更改

scope: {
  foo: '@'
},

scope: {
  foo: '='
},