2013-04-13 14 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>' 
} 
}); 

OK: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

クール、それは動作します。しかし私は自分のコードに何が間違っているかを見ることはできません。私が間違っていることを指摘できますか?あなたはrestrictを使っているのとまったく同じ方法ではありません: 'E'しかし、あなたのコードが動作している理由ではありませんか? – Sam

+0

オブジェクト内にプロパティをカプセル化する必要があるからだと思います。そうではなく、を実行する代わりに、 jpmorin

+0

それは、私は両方の方法を試してみましたが、どちらも私のために働いていません。 – Sam

関連する問題