angularjs - Weird Angular Binding Issue -
i'm having weird angularjs binding problem
<a class="navbar-brand" href="#">application (environment: {{ globalconfig.environment + ""}})</a> that work, , render value "dev"
<a class="navbar-brand" href="#">application (environment: {{ globalconfig.environment }})</a> this doesn't render anything.
<a class="navbar-brand" href="#">application (environment: <span ng-bind="globalconfig.environment"></span>)</a> this lastly illustration works.
any ideas why sec illustration won't render out value "dev"?
the controller follows:
angular.module('uppapp').controller('globalcontroller', function ($scope) { $scope.globalconfig = { environment: 'dev' }; }); the html looks follows:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" ng-app="uppapp"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>pixel pimp web ui</title> <link href="assets/css/style.css" rel="stylesheet" /> <!-- html5 shim , respond.js ie8 back upwards of html5 elements , media queries --> <!--[if lt ie 9]> <script src="assets/thirdparty/ie8mediasupport.js"></script> <![endif]--> </head> <body ng-controller="globalcontroller"> <div class="navbar navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">pixel pimp (environment: <span ng-bind="globalconfig.environment"></span>)</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">dashboard</a></li> <li><a href="#about">pixel groups</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> <div class="container"> <h1>dashboard</h1> <div id="myfirstchart" style="height: 250px;"></div> </div><!-- /.container --> <script src="assets/thirdparty/built.js"></script> <script src="assets/js/uppangular.js"></script> <script> $(function () { gengraph(); }); function gengraph() { new morris.line({ // id of element in draw chart. element: 'myfirstchart', // chart info records -- each entry in array corresponds point on // chart. data: [ { year: '2008', value: 20 }, { year: '2009', value: 10 }, { year: '2010', value: 5 }, { year: '2011', value: 5 }, { year: '2012', value: 20 } ], // name of info record attribute contains x-values. xkey: 'year', // list of names of info record attributes contain y-values. ykeys: ['value'], // labels ykeys -- displayed when hover on // chart. labels: ['value'] }); } </script> </body> </html> update when wrap decorate interpolate service debugging this:
app.config(function($provide){ $provide.decorator("$interpolate", function($delegate){ var interpolatewrap = function(){ var interpolationfn = $delegate.apply(this, arguments); if(interpolationfn) { homecoming interpolationfnwrap(interpolationfn, arguments); } }; var interpolationfnwrap = function(interpolationfn, interpolationargs){ homecoming function(){ var result = interpolationfn.apply(this, arguments); var log = result ? console.log : console.warn; log.call(console, "interpolation of " + interpolationargs[0].trim(), ":", result.trim()); homecoming result; }; }; angular.extend(interpolatewrap, $delegate); homecoming interpolatewrap; }); }); the console log show:
interpolation of {{globalconfig.environment+""}} : dev however binding of {{globalconfig.environment}} nil shows in console window.
ok figured out. i'm using grunt bake first time, , think grunt bake, stripping out {{globalconfig.environment}} code rendered file.
sorry. stupid mistake.
updateultimately fixed modifying bake parse pattern utilize [{ }] instead of {{ }}
bake: { build: { options: { parsepattern: '/\[\{\s?([\.\-\w]*)\s?\}\]/g' }, files: { "app/index.html": "app/base.html" } } }, angularjs
No comments:
Post a Comment