1. atskimura
Changes in body
Source | HTML | Preview
@@ -1,34 +1,43 @@
ちょいネタです。
Lightningコンポーネントには双方向バインディングがない(と思う)ので、AngularJSを動かしてみました。(Knockout.jsの方が軽くてよさそうですけど。)
-でも、普通に`ng-repeat`とかやるとレンダリングした時に属性を消しやがりまして動きません。ので、`data-ng-repeat`のように書くのがポイントです
+でも、普通に`ng-repeat`とかやるとレンダリングした時に属性を消しやがりまして動きません。
+
+ポイント
+
+- `ng-controller`などは削除されてしまうので、`data-ng-controller`にする。
+- `ng-app`は最初の一つしか自動起動しないため、複数コンポーネントが配置された場合に動かなくなるので、`angular.bootstrap`で手動起動する
# Component
```xml
-<aura:component access="global" implements="flexipage:availableForAllPageTypes">
+<aura:component access="global" implements="flexipage:availableForAllPageTypes" description="">
<ltng:require scripts="/resource/angular_min_js" afterScriptsLoaded="{!c.doInit}" />
- <div data-ng-app="sampleApp" data-ng-controller="MainCtrl">
- <h1>Angular</h1>
+ <div id="{!globalId + '_sampleApp'}" data-ng-controller="MainCtrl">
+ <h1>Angular!</h1>
<p>{{msg}}</p>
</div>
</aura:component>
```
# Controller
```js
({
doInit: function(component, event, helper) {
- angular.module('sampleApp', []).controller('MainCtrl', ['$scope', function($scope) {
+ 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)
おしまい