2013-04-13 166 views
7

試圖讓我的頭繞過AngularJS指令。我需要將一個完整的對象從我的主控制器傳遞給指令。請參閱下面的代碼的jsfiddle:http://jsfiddle.net/graphicsxp/Z5MBf/4/將對象傳遞給來自控制器的angularjs指令

<body ng-app="myApp"> 
<div ng-controller="MandatCtrl"> 
    <div person myPerson="mandat.person"></div> 

    <span>{{mandat.rum}}</span> 
    <span>{{mandat.person.firstname}}</span> 

</div> 

和腳本:

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

myApp.controller("MandatCtrl", function ($scope) { 
$scope.mandat = { rum: "15000", person: { id: 1408, firstname: "sam" } }; 
}); 

myApp.directive("person", function() {  
return { 
    scope: { 
     myPerson: "=" 
    }, 
    template: 'test: <div ng-model="myPerson"><input type="text" ng-model="firstname" /></div>' 
} 
}); 

好,工作正常進行mandat.rum和mandat.person.firstname結合。

但是,我試圖將mandat.person傳遞給指令,它不起作用。我知道我必須做錯事,問題是什麼? :)

+0

的一般注意事項:請不要混淆瑞典語和英語在你的代碼。語法是英文的,用英文保持你的代碼不混合。儘管瑞典語是我的母語,但它讓人難以理解。 –

+4

我希望我能講瑞典語:p你在哪裏可以看到我的代碼中有瑞典語? – Sam

回答

8

請參見下面的工作副本

<!doctype html> 
<html ng-app="plunker" > 
<head> 
    <meta charset="utf-8"> 
    <title>AngularJS Plunker</title> 

    <link rel="stylesheet" href="style.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> 
    <script src="app.js"></script> 
</head> 
<body ng-controller="MainCtrl"> 
     <span>{{mandat.rum}}</span> 
     <span>{{mandat.person.firstname}}</span> 
    <input type="text" ng-model="mandat.person.firstname" /> 
    <my-directive mandateperson="mandat.person" > 

     </my-directive> 
    <script type="text/javascript"> 
     var app = angular.module('plunker', []); 

     app.controller('MainCtrl', function ($scope) { 
      $scope.mandat = { name: "John", surname: "Doe", person: { id: 1408, firstname: "sam" } }; 
     }); 


     app.directive('myDirective', function() { 
      return { 
       restrict: 'E', 
       template: "<div><span>{{mandateperson.id}}<span><input type='text' ng-model='mandateperson.firstname' /></div>", 
       replace: true, 
       scope: { mandateperson: '=' } 
       } 
      } 
     ) 
    </script> 
</body> 
</html> 
+1

酷,這工作。但是我看不出我的代碼有什麼問題。你能指點我做錯了什麼嗎?你使用的限制並不完全相同:'E',但這不能成爲你的代碼工作的原因,或者可以嗎? – Sam

+0

我認爲這是因爲你必須將你的屬性封裝在一個對象中。所以不要這麼做:你必須做 jpmorin

+0

它似乎不是那我已經嘗試了兩種方式,沒有一個適合我。 – Sam

相關問題