2015年12月20日

AngularJSのng-bindとng-bind-template

AngularJSのng-bindはJS式をng-bind-templateはAngularを属性に記述できます。(下記の記述は共に同じ意味)

<p ng-bind-template="{{name1}}は{{name2}}です"></p>
<p ng-bind="name1+'は'+name2+'です'"></p>
posted by ねこまんま at 22:07 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

AngularJSのng-bind-htmlでHTMLを出力

AngularJSではHTMLのデータバインディングにng-bind-htmlを利用するがそのままでは利用できない。angular-sanitizeをあらかじめ読み込んでおき、依存機能にngSanitizeを含めておく必要がある。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.min.js"></script>


<div ng-controller="MyController">
<div ng-bind-html="myData"></div>
</div>


angular.module("myApp",[ 'ngSanitize' ]).controller('MyController',["$scope",function($scope){
$scope.myData = "<b>World</b>";
}]);


もしくは$sce.trustAsHtml()を利用して害がないことを明示的に表現しなくてはいけない。

angular.module("myApp",[]).controller('MyController',["$scope",'$sce',function($scope,$sce){
$scope.myData = $sce.trustAsHtml("World");
}]);

タグ:AngularJS
posted by ねこまんま at 18:44 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

AngularJSのng-cloakとデフォルトCSS

AngularJSは読み込み時に以下のCSSを自動設定します。

ng-cloakはng-bindと同じく初期のチラつき対策に利用され、AngularJSが実行されたタイミングでこの属性が取り除かれて表示することが可能になります。

<style type="text/css">
@charset "UTF-8";
[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}
ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}
</style>
タグ:AngularJS
posted by ねこまんま at 18:31 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

AngularJSの$timeoutで時間差処理

AngularJSではsetTimeoutが利用できないため$timeoutを利用して時間差処理を設定する

angular.module("myApp",[]).controller('MyController',["$scope","$timeout",function($scope,$timeout){
$timeout(function(){
$scope.myName = "World";
},1000);
}]);
タグ:AngularJS
posted by ねこまんま at 18:26 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

AngularJSのng-bindで初期値を設定

ng-bindで要素の初期値を指定しておくとAngularJS実行後に要素の中身が挿入され一瞬のチラツキがなくなります。

angular.module("myApp",[]).controller('MyController',["$scope",function($scope){
$scope.myName = "World";
}]);


<div ng-controller="MyController">
<div ng-bind="'hello '+myName+'!'"></div>
</div>
タグ:Angular
posted by ねこまんま at 18:11 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする

2015年12月18日

ng-strict-diと配列アノテーション

AngularJSではng-strict-di属性をng-app属性と同じ要素に付与することで配列アノテーションを強制することができる。

<html lang="en" ng-app="myApp" ng-strict-di>


以下の様なコールバックの引数に名前を指定するのはだめで、

var myApp = angular.module('myApp',[]);
myApp.controller('MyController',function($scope){
$scope.msg = "こんにちは こんにちは こんにんちは";
});


配列アノテーションを利用して引数を固定しておく。

var myApp = angular.module('myApp',[]);
myApp.controller('MyController',["$scope",function($scope){
$scope.msg = "こんにちは こんにちは こんにんちは";
}]);


また、以下のように$injectを利用して配列アノテーションを実行してもよい。

var myApp = angular.module('myApp',[]);
var MyController = function($scope){
$scope.msg = "こんにちは こんにちは こんにんちは";
};
MyController.$inject = ["$scope"];
myApp.controller('MyController',MyController);

posted by ねこまんま at 13:47 | Comment(0) | TrackBack(0) | Angular | 更新情報をチェックする