2013-04-13 76 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

相关问题