在jquery app中包含angularJS app

时间:2016-06-15 15:30:26

标签: jquery angularjs include encapsulation

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

的index.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>

公开/ 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 个答案:

答案 0 :(得分:1)

你需要手动进行角度引导而不是ng-app 检查here

中的手动初始化

答案 1 :(得分:1)

谢谢Abdou,你是对的!这就是答案!

<强>的index.html

func togglePlay(){


    if(self.isPlaying == false){
        if(self.isBora == true){

            let second = 0.9
            let delay = second * Double(NSEC_PER_SEC)
            let dispatchTime = dispatch_time(DISPATCH_TIME_NOW, Int64(delay))
            dispatch_after(dispatchTime, dispatch_get_main_queue(), {
                self.loadBar!.hidden = true
            })
        }

        self.play()

    }else{
        self.pause()  
    }

}

公开/ angular.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>