angularjs 1 ручной бутстрап не работает

Я новичок в angularjs. Я попытался создать 2 разных модуля в одном файле js, и они вручную загружают один из них в элемент. Это было предложено в одном из вопросов stackoverflow. Но это, похоже, не работает. Оба модуля работают нормально независимо. Я не уверен, что здесь происходит не так. Вот мой код: -angularjs 1 ручной бутстрап не работает

myApp.js

var app = angular.module("myApp", []); 
var myController = app.controller("ctrl1", function($scope){ 
"use strict"; 
$scope.fname = "Bill"; 
$scope.lname = "Goldberg"; 
$scope.updatevalue = function() { 
    $scope.fullname = $scope.fname + $scope.lname; 
    //$scope.fname = "newName" 
}; 
}); 
app.directive("w3TestDirective", function() { 
    "use strict"; 
    return { 
     template : "<h1>This is my life!</h1>" 
    }; 
}); 

var loginController = angular.module('loginController', []); 
loginController.controller('loginCntrl', function ($scope) { 
"use strict"; 
$scope.username="email"; 
$scope.password="password"; 
$scope.present = false; 
$scope.login = function() { 
    "use strict"; 
    if ($scope.username == "Amar" & $scope.password == "Amar") { 
     $scope.present=true; 
     $scope.loginMessage = "logged in successfully"; 
    } else { 
     $scope.present=true; 
     $scope.loginMessage = "Invalid username or password"; 
    } 
} 
}); 

angular.bootstrap(document.getElementById("loginDiv"),['loginController']);

Index.html

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
<!--script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script--> 
<script src="scripts/services/myApp.js"></script> 
<!--script src="scripts/services/login.js"></script--> 
<body> 

    <div id="demoDiv" ng-app="myApp" ng-controller="ctrl1"> 
    <span>Values:</span> 
    <input type="text" ng-model="fname"/> 
    <input type="text" ng-model="lname"/> 
    <button ng-click="updatevalue()">fullname</button> 
    <br></br> 
    {{ fullname }} 
    <br></br> 
    <w3-test-directive></w3-test-directive> 
    </div> 
    <br></br> 
    <div id="loginDiv" ng-app="loginController" ng-controller="loginCntrl"> 
    <input type="text" ng-model="username"/> 
    <input type="text" ng-model="password"/> 
    <button ng-click="login()">submit</button> 
    <br></br> 
    <div ng-if="present"> {{ loginMessage }} </div> 
    </div> 

</body> 
</html>

источник

2016-12-03 Amar Dev

обновление, первый ДИВ с угловым поведением работы, т.е. DIV с идентификатором demoDiv работает, но один, который вручную бутстрапированная оленья кожа –

Это должно быть указано, что «не работает» средства. Вероятно, проблема заключается в том, что 'angular.bootstrap' выполняется до того, как загрузка страницы завершена. Следует также заметить, что множественная самонастройка не является обычной практикой и должна использоваться только тогда, когда разработчик знает, что он/она делает очень хорошо (на практике это почти никогда). Тот факт, что вы «новичок в angularjs», предполагает, что вы, вероятно, делаете это неправильно. – estus

Мой ПЛОХО !!!! привязка не работает, второй div не показывает углового поведения, я получаю {{loginMessage}} в браузере. Но первый div работает хорошо и показывает угловое поведение. –

Это совершенно неправильный подход. У вас есть CAN имеют свои контроллеры в нескольких модулях, но у вас всегда должен быть один модуль, который является основным родителем приложения.

Давайте Предположим myApp ваш родительский модуль, и внести некоторые изменения:

во-первых, переместите ng-app к элементу тела:

<body ng-app="myApp"> 

    <div id="demoDiv" ng-controller="ctrl1"> 
...

Далее удалить ng-app из loginDiv:

<div id="loginDiv" ng-controller="loginCntrl">

И наконец, впрыскиватьloginController модуль в myApp модуль:

var app = angular.module("myApp", ['loginController']);

Теперь приложение будет иметь возможность прикрепить оба контроллера без проблем.

http://plnkr.co/edit/rkFY0ASCHaQUTByaHJg3?p=preview

источник

2016-12-03 17:50:13 Claies

Я установил свой вопрос с помощью следующего кода: -

var app = angular.module("myApp", ['utilModule','loginModule']); 
var myController = app.controller("ctrl1", function($scope){ 
"use strict"; 
$scope.fname = "Bill"; 
$scope.lname = "Goldberg"; 
$scope.updatevalue = function() { 
    $scope.fullname = $scope.fname + $scope.lname; 
    //$scope.fname = "newName" 
}; 
}); 
app.directive("w3TestDirective", function() { 
    "use strict"; 
    return { 
     template : "<h1>This is my life!</h1>" 
    }; 
}); 


<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
<!--script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script--> 
<script src="scripts/services/myApp.js"></script> 
<script src="scripts/services/util.js"></script> 
<script src="scripts/services/login.js"></script> 
<body ng-app="myApp"> 

    <div id="demoDiv" ng-controller="ctrl1"> 
    <span>Values:</span> 
    <input type="text" ng-model="fname"/> 
    <input type="text" ng-model="lname"/> 
    <button ng-click="updatevalue()">fullname</button> 
    <br></br> 
    {{ fullname }} 
    <br></br> 
    <div ng-controller="utilCntrl"> 
     {{ test }} 
    <testDirective></testDirective> 
    </div> 
    <w3-test-directive></w3-test-directive> 
    </div> 
    <br></br> 
    <div id="loginDiv" ng-controller="loginCntrl"> 
    <input type="text" ng-model="username"/> 
    <input type="text" ng-model="password"/> 
    <button ng-click="login()">submit</button> 
    <br></br> 
    <div ng-if="present"> {{ loginMessage }} </div> 
    </div> 

</body> 
</html>

Существует только одна проблема, тег testDirective оленью кожу печать ничего в браузере. но это не является обязательным требованием, поэтому я пока просто проигнорирую это. Я понимаю, что это то, что @Claies опубликовал. Клэйс, Большое спасибо за ваше время и силы.

источник

2016-12-03 18:28:13

Просто обновление, я также получил тег testDirective !!! –

Вы не можете использовать директиву ng-app и функцию angle.bootstrap для загрузки углового приложения. Вы либо используете ng-app, либо angular.bootstrap.

Если у вас есть два модуля «myApp» и «loginController», как в вашем приложении, вы должны сделать loginController зависимым от «myApp». «myApp» будет вашим угловым модулем приложения, в котором вы можете добавить больше зависимостей, внешних или пользовательских.

angular.module('myApp', ['loginController', 'ui-router', 'etc'...])

источник

2016-12-03 22:01:50 btinoco

Вы правы btinoco, я понял это и подключил мое приложение правильно. Спасибо, что нашли время, чтобы ответить на этот вопрос. Спасибо большое! –

angularjs 1 ручной бутстрап не работает

ответ

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