angularjs - Bind model to custom directive -
i attempt provide model(geography) in controller input directive in angularjs1.3 -
index.html
<html lang="en" ng-app="directivesapp"> <head> <script src="js/angular.min.js"></script> <script src="js/app.js"></script> </head> <body ng-controller="directivectrl"> <label>geography</label><input type="text" ng-model="geography"/> <custom-demo user={{geography}}></custom-demo> </body> </html>
app.js
angular.module('directivesapp', []) .directive('customdemo',function(){ return{ restrict:'e', template:'geography : <b>{{geography}}</b>', scope:{geography : '='} } });
however,the value entered in input not reflected in html rendered directive. how make happen?
you set geography
user
attribute of customdemo
directive. in directive there geography
attribute defined in scope. replace code following:
<label>geography</label><input type="text" ng-model="geography"/> <custom-demo geography="geography"></custom-demo>
and pass geography
variable object instead of value (without curly braces).
or can define geography
variable in directive likes this:
scope: { geography : '=user' }
and in html remove curly braces geography
variable passed user
attribute of customdemo
directive.
<label>geography</label><input type="text" ng-model="geography"/> <custom-demo user="geography"></custom-demo>
Comments
Post a Comment