2013-04-13 3 views
7

AngularJS 지시어에서 머리를 쓰려고합니다. 내 주 컨트롤러에서 지시문으로 전체 개체를 전달해야합니다. mandat.rum 및 mandat.person.firstname을 위해 잘 작동 바인딩,컨트롤러에서 angularjs 지시어로 객체를 전달합니다.

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>' 
} 
}); 

확인 : http://jsfiddle.net/graphicsxp/Z5MBf/4/

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

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

</div> 

하고 스크립트 : 아래의 코드와 jsfiddle을 참조하십시오.

그러나 mandat.person을 지시문에 전달하려고하는데 작동하지 않습니다. 나는 내가 틀린 일을해야한다는 것을 안다, 그 질문은 무엇인가? :)

+0

일반적인 메모를 작업은 아래를 참조하십시오 : 코드에서 스웨덴어와 영어 혼합하지 마십시오. 구문은 영어로되어 있으며 코드를 영어로 혼합하지 않고 보관하십시오. 스웨덴어가 제 모국어인데도 이해하기가 더 어려워집니다. –

+4

나는 스웨덴어를 말하고 싶다 : p 어디서 스웨덴어를 볼 수 있습니까? – Sam

답변

8

Pls는 복사를

<!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

관련 문제