使用Lightning组件驱动AngularJS

这是一个小插曲。

由于 Lightning 组件没有双向绑定(我认为),所以我试着运行了 AngularJS。(虽然 Knockout.js 更轻量好用一些。)
但是,普通使用 ng-repeat 等操作时,在渲染时属性会被移除,导致无法正常工作。

积分 (jī

ng-controllerなどは削除されてしまうので、data-ng-controllerにする。

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

组件

<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>

控制器

({
  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

结束了 (Jieshu le)

补充(2015/04/28 14:03)

AngularJS将其设置在window.angular上。
即使使用闭包将其封装在内部,它仍然会将其设置在window.angular上,从而无法与其他版本的AngularJS组件共存。
在Lightning组件中使用AngularJS可能是不可能的。

广告
将在 10 秒后关闭
bannerAds