Friday, July 25, 2014

ng-bind, ng-non-bindable, ng-bind-template and class="ng-bind:property"

Index.html

<html data-ng-app="app" id="ng-app" lang="sv">

<head>
 
 

<div data-ng-controller="oControllerA">

<h1>Controller A</h1>

<h2>{{dataObject}}</h2>

<h3>{{dataObject.color}}</h3>

<h3 ng-bind="dataObject.color"></h3>

<h3 ng-bind-template="{{dataObject.color}}"></h3>

<h3 ng-non-bindable>{{dataObject.color}}"</h3>

<h3 class="ng-bind:dataObject.color"></h3>

<input type=" text" data-ng-model="dataObject.color" />

</div>

Angular .Js
var app = angular.module('app', []);
app.factory('ShareService', function () {

return {

dataObject: { color: "Seal" }



}

});
 
app.controller('oControllerA', ['$scope', 'ShareService', function ($scope, ShareService) {



$scope.dataObject = ShareService.dataObject;

}

]);
 

Output

Controller A

{"color":"Seal"}

Seal

Seal

Seal-  ng-bind-template here it can date format.

{{dataObject.color}}" - Ng-non-bindable

Seal


 

No comments :