Прохождение объекта к директиве angularjs от контроллера

Пытается задуматься над директивами 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>' 
} 
});

Ok, привязка работает отлично для mandat.rum и mandat.person.firstname.

Однако, я пытаюсь передать mandat.person в директиве, и это не сработает. Я знаю, что я должен что-то делать неправильно, вопрос в том, что? :)

источник

2013-04-13 Sam

Общее примечание: Пожалуйста, не путайте шведском и английском языках в вашем коде. Синтаксис на английском языке, сохраните свой код на английском языке без смешивания. Это просто усложняет понимание, хотя шведский язык - мой родной язык. –

Хотел бы я поговорить по-шведски: p Где вы видите шведского в моем коде ??? – Sam

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>

источник

2013-04-13 16:55:55

прохладный, это работает. Но я не вижу, что не так с моим кодом. Не могли бы вы указать мне, что я делаю неправильно? Вы не делаете точно так же, как используете ограничение: «E», но это не может быть причиной того, что ваш код работает, или он может? – Sam

Я думаю, это потому, что вы должны инкапсулировать свои свойства внутри объекта. Поэтому вместо того, чтобы делать: , вы должны выполнить – jpmorin

, похоже, что я пробовал оба пути, и никто из них не работает для меня. – Sam

Прохождение объекта к директиве angularjs от контроллера

ответ

Смежные вопросы