Добавить угловое приложение в уже существующее приложение и данные передачи

Я пытаюсь добавить угловое приложение в уже существующее приложение jquery. Предположим, у меня есть простая кнопка в html.
Я пытаюсь загрузить угловое приложение и запустить код контроллера при нажатии кнопки. Я загружаю угловое приложение, используя angular.bootstrap(document, ['myApp']). а также я пытаюсь передать некоторые данные из jquery в угловое приложение. Возможно ли это?Добавить угловое приложение в уже существующее приложение и данные передачи

Есть look-

<!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>

источник

2015-07-23 NeiL

вы можете направить some_value доступа в контроллер – ngLover

я не уверен в этом, но как запустить код контроллера на кнопку мыши. – NeiL

Попробуйте создать службу или const с заданным значением, например, angular.module ('myApp'). Constant ('buttonValue', $ (this) .val()) и вставить константу в контроллер –

jQuery и AngularJS не «говорить» друг с другом непосредственно, но Угловая означает «видеть» любой другой родной 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.

Я надеюсь, что это помогает ....

источник

2017-03-03 16:20:43

Добавить угловое приложение в уже существующее приложение и данные передачи

ответ

Смежные вопросы