将对象从控制器传递给 angularjs 指令 [英] passing object to angularjs directive from the controller
问题描述
试图让我了解 AngularJS 指令.我需要将一个完整的对象从我的主控制器传递给指令.请参阅下面的代码和 jsfiddle:http://jsfiddle.net/graphicsxp/Z5MBf/4/
<div ng-controller="MandatCtrl"><div person myPerson="mandat.person"></div><span>{{mandat.rum}}</span><span>{{mandat.person.firstname}}</span>和脚本:
var myApp = angular.module("myApp", []);myApp.controller("MandatCtrl", function ($scope) {$scope.mandat = { rum: "15000", person: { id: 1408, firstname: "sam" } };});myApp.directive("person", function () {返回 {范围: {我的人:="},模板:'测试:<div ng-model="myPerson"><input type="text" ng-model="firstname"/></div>'}});好的，绑定对 mandat.rum 和 mandat.person.firstname 工作正常.
但是，我试图将 mandat.person 传递给指令，但它不起作用.我知道我一定做错了什么，问题是什么?:)
请参阅下面的工作副本
<html ng-app="plunker" ><头><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><body ng-controller="MainCtrl"><span>{{mandat.rum}}</span><span>{{mandat.person.firstname}}</span><input type="text" ng-model="mandat.person.firstname"/><my-directivemissionperson="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 () {返回 {限制:'E'，模板:<div><span>{{mandateperson.id}}<span><input type='text' ng-model='mandateperson.firstname'/></div>",替换:真的，范围:{委托人:'='}}})</html>Trying to get my head around AngularJS directives. I need to pass a full object from my main controller to the directive. See the code below and jsfiddle: 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>
and the 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, the binding is working fine for mandat.rum and mandat.person.firstname.
However, I'm trying to pass mandat.person to the directive, and it does not work. I know I must be doing something wrong, the question is what ? :)
Pls see below working copy
<!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>
这篇关于将对象从控制器传递给 angularjs 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
