Question

我正在尝试在现有的jquery应用程序中添加角度应用程序。假设我在html中有一个简单的按钮我正在尝试加载角度应用程序并在按钮单击时运行控制器代码。我使用angular.bootstrap(document, ['myApp'])手动加载角度应用。而且我也试图将一些数据从jquery传递给角应用程序。有可能吗？

看看 -

<!DOCTYPE html>
<html>
<head lang="en">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <title>jA</title>
</head>
<body>
<button id="myButton" value="25">Hello world</button>
</body>
<script>

    angular.module('myApp', [])     // I defined the angular app.
            .controller('MyController', ['$scope', function ($scope) {
                console.log('Hello world');  // This should run on button click.
            }]);

    $(document).ready(function () {
        $("#myButton").click(function(){
            var some_value = '25';   //value i am trying to pass to angular app to use in angular app.
            angular.bootstrap(document, ['myApp']); //load angular app

        });

    });

</script>
</html>

Answer 1

jQuery和AngularJS不要＆＃34;谈话＆＃34;直接相互之间，但Angular确实＆＃34;看＆＃34;你有任何其他原生javascript，所以我们可以说 - 如果你定义一个全局变量并在jQuery访问它时通过AnuglarjJS进行更改 - 它可以读取并使用该值。

举例 - 谁使用/致电MyController？

查看我为您创建的小提琴作为示例：https://jsfiddle.net/b29rng12/2/

<div id="myAngularApp">

  <button id="myButton" value="25"> click to bootstrap</button>
  <p ng-controller='MyController'>
    this section will be bind to the controller. {{ test }} and the value is {{ some_jquery_value }}
  </p>
</div>

<script>
    var some_value = '25';   //value i am trying to pass to angular app to use in angular app.

    angular.module('myApp', [])     // I defined the angular app.
            .controller('MyController', ['$scope', function ($scope) {
                console.log('Hello world');  // This should run on button click.
                $scope.test = "ricky";
                $scope.some_jquery_value = some_value;   // This is your predefined variable
            }]);


  $("#myButton").click(function(){  
    some_value = 30;
    angular.bootstrap($("#myAngularApp"), ['myApp']); //load angular app
  });

</script>

所以只是解释一下 - 应用程序在未启动时启动，这就是为什么您会看到{{ }}而不是值。

点击按钮后（如您的示例所示） - 应用程序已自动启动 - 它仍然不代表此代码将使用您考虑的特定controller（角度模块可以有100个控制器 - 那么谁会使用什么？！）所以我定义了<p ng-controller='MyController'> - 是在app被引导后绑定控制器的。

我希望它有所帮助....

在现有应用中添加角度应用并传输数据

1 个答案: