代码之家 › 专栏 › 技术社区 › Raptor Jesus

在jquery应用程序中包含angularJS应用程序

encapsulation include angularjs jquery

Raptor Jesus · 技术社区 · 8 年前

我有两个应用程序,一个角度应用程序和一个jquery应用程序。我想用jQuery加载我的角度应用程序。这是我的代码(非常简单):

索引.html

<html>
  <head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="div1"></div>
    <script>
       $("#div1").load("public/angular.html");//load angular app
    </script>
  </body>
</html>

public/angular.html

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="public/app.js">
  </head>
  <body ng-controller="MyController">
    <h1>{{message}}</h1>
  </body>
</html>

公共/app.js

angular.module("myApp", []);

angular.module("myApp").controller('AppController', function($scope){
    $scope.message = "Hi everyone !";
});

有可能做到吗?这是一种正确的方法吗?

谢谢你的回复!

2 回复 | 直到 7 年前

abdoutelb 8 年前

您需要手动执行角度引导,而不是使用ng-app 在中选中手动初始化 here

Raptor Jesus 8 年前

谢谢Abdou,你说得对!这就是答案!

索引.html

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  </head>
  <body>
    <div id="div1"></div>
    <script>
        $("#div1").load("public/angular.html");//load angular app
    </script>
  </body>
</html>

public/angular.html

<html>
  <body>
    <div ng-controller="MyController">
      Hello {{greetMe}}!
    </div>

    <script>
      angular.module('myApp', []).controller('MyController', ['$scope', function ($scope) {
        $scope.greetMe = 'World';
      }]);

      angular.element(document).ready(function() {
       angular.bootstrap(document, ['myApp']);
      });
    </script>
  </body>
</html>

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

2 年前

Community wiki · 无法从jquery文档调用函数

2 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前