我想在 Polymer 网络组件中制作一个小型 Angular 应用。
我写了一个快速测试看看这是否可行:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<script type="text/javascript" src="../../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../../bower_components/angular/angular.js"></script>
<polymer-element name="test-component">
<template>
<div ng-app="app">
<div ng-controller="AppCtrl">
... {{test}} ...
</div>
</div>
</template>
<script>
!function () {
Polymer('test-component', {
ready: function () {
var app = angular.module('app', [])
app.controller('AppCtrl', function ($scope) {
$scope.test = 'testing';
});
}
});
}();
</script>
</polymer-element>
不幸的是，这不起作用。页面显示... ...而不是 ... testing ... .控制台中未显示任何错误。
我尝试从 ready 中取出 Angular 代码完全钩住 Polymer 函数。 console.log(angular, app)在 ready正在返回正确的东西，但产生了与以前相同的结果。
我还尝试将 Angular 代码放在模板的最底部，基本上是处理 <template>标记为 <body>标签。这也导致了相同的行为。
是否可以在 Web 组件中使用 Angular？如果可能的话，我希望能够在使用 AngularJS 的同时使用 Web 组件的封装特性(shadow DOM 等)。
最佳答案
截至目前，我在一个非常大的网络应用程序上一起使用 Angular 和 Polymer 没有任何问题，使用了 ng-polymer-elements 的变体。 .
它也有一些有用的测试。
关于javascript - 在 Polymer Web 组件中使用 AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30105575/