Создание контроллера
Контроллер AngularJS используется повсюду, а демонстрация кода относительно проста в создании.
<! Doctype html> <html xmlns = "http://www.w.org//xhtml" ng-app = "exampleapp"> <Head> <meta http-equiv = "type" content = "text/html; charset = utf-"/> <Tupt> src = "angular.js"> < /script> <link href = "bootstrap-teme.css" rel = "stylesheet" /> <link href = "bootstrap.css" rel = "stylesship" /> функции script> angular.module("examplepp ", []). {$ scope.setInput = function (value) {console.log ("print:" + value);}}); </script> </head> <body ng-controller = "defaultCtrl"> <viv> <h> count </h> <div> <into ng-model = "/> <кнопка ng-click = "setInput (value)"> нажмите </button> </div> </body> </html>Управление очень просто. Во-первых, я добавил атрибут NG-App в HTML, чтобы указать объем модуля.
Добавлен NG-контроллер в корпус, чтобы представлять объем контроллера DefaultCtrl.
Команда NG-модели в входной примечании представляют собой данные привязки, двустороннее связывание данных (MVVM).
$ Scope-это встроенный масштаб Angularjs.
Этот пример просто для печати входного значения в консоли, как показано на рисунке:
Это все, это просто.
Многочисленные проблемы с охватом контроллера
Теперь давайте изменим программу.
<body> <div ng-controller = "defaultctrl"> <h> count </h> <div> <Ввод требуется ng-model = "value"/> <кнопка ng-click = "setInput (value)"> нажимать </button> </div> </div> <div ng-controller = "defaultctrl"> </hure count </h> <div ng-controller = defaultctr /> <кнопка ng-click = "setInput (value)"> нажмите </button> </div> </body>
Остальная часть кода остается неизменной, я просто поместил свойство, которое NG-Контроллер помещает в тело в два DIV. Я повторно использовал контроллер по умолчанию. Я предполагаю, что если я введу контент в первом входном теге и нажимаю кнопку кнопки второго контроллера, будет ли вы ожидаете результат?
Результат такой же, как и то, что вы думаете о вас? Вы можете видеть, что результат не определен. В хорошем объяснении должно быть то, что их объем отличается. Хотя вы повторно использовали единый контроллер, применение действительно различна при его создании.
Вы называемой заводской функции вернет разные прицелы.
Так как получить доступ между различными областями? В Angularjs есть $ rootcope для доступа к объему.
Вот три функции для введения.
$ on (name, andler) Зарегистрируйте функцию обработчика событий, которая будет вызвана, когда конкретное событие будет получено текущим объемом.
$ Emit (name, args) отправляет событие в текущую применение родителей до корневой области.
$ Broadcast (name, args) отправляет событие в подсказу под текущей областью, параметр - это имя события и объект, используемый для предоставления дополнительных данных для события.
Теперь измените следующий код:
<script> angular.module ("exampleApp", []). Controller ("defaultCtrl", function ($ scope, $ rootscope) {$ scope. $ on ("updatevalue", function (event, args) {$ scope.input = args.zip;}); "$ scope.sestinput = function (value) {$ rootcope. { zip: value });console.log("print:" + $scope.input);}$scope.copy = function () {console.log("copy:" + $scope.input);};});</script> <div ng-controller="defaultCtrl"><h>Count</h><div><input required ng-model="value" /> <кнопка ng-click = "copy ()"> copy </button> </div> </div>В коде сегмента я добавил несколько функций и одновременно изменил функции второго контроллера.
результат:
Это произошло.
Наследство контроллера
<script> angular.module ("exampleApp", []). Controller ("defaultCtrl", функция ($ scope, $ ourtscope) {//,, $ {//$rotcope.$broadcast("updatevalue ", {zip: value}); $ scope.input = value; console.log (" print: " + $ scope.input);} $ scope.cope = function () {console.log (" copy: " + $ scope.input); {$ scope.cope = function () {console.log ("copy:" + $ scope.input);};}); </script> <body ng-controller = "defaultCtrl"> <viv> <h> count </h> <div> <into ng-model = "/> <кнопка ng-click = "setInput (value)"> нажмите </button> </div> <div> <div ng-controller = "simplectert"> <h> count </h> <div> <Ввод требуется ng-model = "value"/> <кнопка ng-click = "copy ()"> copy </button> </div> </div> </bood> complicЯ добавил контроллер, и после тщательного наблюдения за простым, я обнаружил, что DefaultCtrl содержит простые, поэтому функция простых наследников.
Результаты: Когда я разместил вход в первое окно, второе также изменилось, и он должен быть одинаковым значением.
$ recaine Проблема, вы должны понимать его область при использовании контроллера.