passando da oggetto a direttiva angularjs dal controller

Cercando di orientarmi sulle direttive AngularJS. Devo passare un oggetto completo dal mio controller principale alla direttiva. Vedere il codice qui sotto e jsfiddle: http://jsfiddle.net/graphicsxp/Z5MBf/4/passando da oggetto a direttiva angularjs dal controller

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

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

</div>

e lo script:

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, l'associazione sta lavorando bene per mandat.rum e mandat.person.firstname.

Tuttavia, sto cercando di passare a mandat.person alla direttiva, e non funziona. So che devo fare qualcosa di sbagliato, la domanda è cosa? :)

fonte

2013-04-13 Sam

Una nota generale: Si prega di non mescolare svedese e inglese nel codice. La sintassi è in inglese, mantieni il tuo codice in inglese senza mixare. Rende solo più difficile da capire, anche se lo svedese è la mia lingua madre. –

Vorrei parlare in svedese: p Dove vedi uno svedese nel mio codice ??? – Sam

Pls vede sotto di lavoro copia

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

fonte

2013-04-13 16:55:55

cool, che funziona. Ma non riesco a vedere cosa c'è di sbagliato nel mio codice. Potresti indicarmi cosa stavo facendo male? Non stai esattamente nello stesso modo in cui usi la restrizione: "E", ma non può essere la ragione per cui il tuo codice funziona o no? – Sam

Penso che sia perché devi incapsulare le tue proprietà all'interno di un oggetto. Quindi invece di fare: devi fare – jpmorin

non sembra essere ho provato entrambi i modi e nessuno di loro ha funzionato per me. – Sam

passando da oggetto a direttiva angularjs dal controller

risposta

Problemi correlati