LightningコンポーネントでAngularJSを動かす

ちょいネタです。

Lightningコンポーネントには双方向バインディングがない（と思う）ので、AngularJSを動かしてみました。（Knockout.jsの方が軽くてよさそうですけど。）
でも、普通にng-repeatとかやるとレンダリングした時に属性を消しやがりまして動きません。

ポイント

• ng-controllerなどは削除されてしまうので、data-ng-controllerにする。
• ng-appは最初の一つしか自動起動しないため、複数コンポーネントが配置された場合に動かなくなるので、angular.bootstrapで手動起動する。

Component

<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

({
  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/28 14:03）

AngularJSはwindow.angularにセットしてしまう。
クロージャで囲んでも中でwindow.angularにセットしてしまうので、他のバージョンのAngularJSを使ったコンポーネントと共存できなくなってしまう。
LightningコンポーネントでAngularJSを使うのは無理かも。。。