1. atskimura

    No comment

    atskimura
Changes in body
Source | HTML | Preview
@@ -1,43 +1,49 @@
ちょいネタです。
Lightningコンポーネントには双方向バインディングがない(と思う)ので、AngularJSを動かしてみました。(Knockout.jsの方が軽くてよさそうですけど。)
でも、普通に`ng-repeat`とかやるとレンダリングした時に属性を消しやがりまして動きません。
ポイント
- `ng-controller`などは削除されてしまうので、`data-ng-controller`にする。
- `ng-app`は最初の一つしか自動起動しないため、複数コンポーネントが配置された場合に動かなくなるので、`angular.bootstrap`で手動起動する。
# Component
```xml
<aura:component access="global" implements="flexipage:availableForAllPageTypes" description="">
<ltng:require scripts="/resource/angular_min_js" afterScriptsLoaded="{!c.doInit}" />
<div id="{!globalId + '_sampleApp'}" data-ng-controller="MainCtrl">
<h1>Angular!</h1>
<p>{{msg}}</p>
</div>
</aura:component>
```
# Controller
```js
({
doInit: function(component, event, helper) {
var globalId = component.getGlobalId();
var appName = globalId + '_sampleApp';
var app = angular.module(appName, []);
app.controller('MainCtrl', ['$scope', function($scope) {
$scope.msg = "Hello!";
}]);
angular.bootstrap(document.getElementById(appName), [appName]);
}
})
```
# 動く
![スクリーンショット 2015-04-17 22.06.05.png](https://qiita-image-store.s3.amazonaws.com/2454/27267/53a1e037-c419-ebcc-b765-c1667861e918.png)
おしまい
+
+# 追記(2015/04/28 14:03)
+
+AngularJSは`window.angular`にセットしてしまう。
+クロージャで囲んでも中で`window.angular`にセットしてしまうので、他のバージョンのAngularJSを使ったコンポーネントと共存できなくなってしまう。
+LightningコンポーネントでAngularJSを使うのは無理かも。。。