在WordPress页面中嵌入Angular 1应用失败的技术求助

我帮你梳理下AngularJS 1嵌入WordPress页面常见的问题和解决方案，你可以一步步排查：

1. 先修正脚本加载顺序 #

你当前的代码里先加载了Angular，再加载jQuery——这会导致Angular初始化时用的是自带的jqLite，而不是你引入的完整jQuery，很可能引发依赖问题。必须先加载jQuery，再加载Angular：

<!-- 先加载jQuery -->
<script src="https://test.com/Components/scripts/jquery-1.12.4.js"></script>
<!-- 再加载AngularJS -->
<script src="https://test.com/Components/scripts/angular.min.js"></script>
<!-- 最后加载你的应用逻辑脚本 -->
<script>
// 这里写你的Angular代码
</script>

2. 处理jQuery与WordPress的冲突 #

WordPress默认加载的jQuery是用jQuery命名空间，而不是$，如果你的代码里依赖$，会直接报错。可以用noConflict()来兼容：

jQuery.noConflict();
(function($) {
  // 在这里可以安全使用$
  $(document).ready(function() {
    // 初始化你的Angular应用
    angular.module('myApp', [])
      .controller('Wallf', function() {
        var vm = this;
        // 你的控制器逻辑代码
      });
  });
})(jQuery);

3. 避免编辑器/插件过滤代码 #

WordPress的编辑器（尤其是Gutenberg）或者安全插件经常会过滤掉<script>标签，导致你的代码无法正常加载：

• 如果用Gutenberg编辑器，一定要用自定义HTML区块插入完整代码，不要用普通文本/段落区块；
• 如果是经典编辑器，切换到文本模式（而非可视化模式）粘贴代码，可视化模式会自动清理脚本；
• 暂时禁用安全类插件（比如Wordfence）测试，确认是否是插件过滤导致的问题。

4. 手动初始化Angular（自动初始化失败时） #

有时候WordPress的DOM加载时机和Angular的自动初始化逻辑冲突，导致ng-app指令没被识别。这时候可以手动启动Angular：
首先移除HTML里的ng-app属性：

<div id="angular-container">
  <div ng-controller="Wallf as vm">
    <div id="newLeadView"></div>
  </div>
</div>

然后在脚本里手动初始化：

jQuery(document).ready(function() {
  // 手动启动Angular应用
  angular.bootstrap(document.getElementById('angular-container'), ['myApp']);
});

5. 用WordPress规范方式加载脚本（更稳定） #

如果不想直接在页面里嵌入脚本，推荐用WordPress的wp_enqueue_script函数来管理脚本加载，避免冲突：
在你的主题functions.php文件中添加以下代码：

function enqueue_my_angular_app() {
  // 加载WordPress自带的jQuery
  wp_enqueue_script('jquery');
  
  // 注册并加载AngularJS
  wp_register_script('angular-js', 'https://test.com/Components/scripts/angular.min.js', array('jquery'), '1.8.2', true);
  wp_enqueue_script('angular-js');
  
  // 注册并加载你的应用脚本（假设脚本放在主题的js文件夹下）
  wp_register_script('my-angular-app', get_template_directory_uri() . '/js/my-app.js', array('angular-js'), '1.0', true);
  wp_enqueue_script('my-angular-app');
}
add_action('wp_enqueue_scripts', 'enqueue_my_angular_app');

然后在主题的js/my-app.js里写你的Angular逻辑：

angular.module('myApp', [])
  .controller('Wallf', function() {
    var vm = this;
    // 你的应用逻辑
  });

最后在页面里只需要添加HTML结构：

<div ng-app="myApp">
  <div ng-controller="Wallf as vm">
    <div id="newLeadView"></div>
  </div>
</div>

先做最小化测试 #

建议先写一个最简单的Angular测试代码，确认基础环境是否正常：

<div ng-app="testApp">
  <div ng-controller="TestCtrl as vm">
    {{vm.testMessage}}
  </div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
angular.module('testApp', [])
  .controller('TestCtrl', function() {
    var vm = this;
    vm.testMessage = "AngularJS 加载成功！";
  });
</script>

如果这段代码能正常显示文本，说明基础环境没问题，再逐步添加你的原有代码排查具体问题。

内容的提问来源于stack exchange，提问作者Benny