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