javascript - AngularJS: Second app in template doesn't work -
this question has answer here:
i have 2 identical apps (apart app/controller name) right after each other. first 1 works expected, second 1 apparently not executed @ all.
my code (jsfiddle):
<div ng-app="passwdtool" ng-controller="passwordcontroller"> password: <input ng-model="pass" required type="text"><br> <span>{{ hash }}</span><br> </div> <div ng-app="passwdtool2" ng-controller="passwordcontroller2"> password: <input ng-model="pass" required type="text"><br> <span>{{ hash }}</span><br> </div> angular.module('passwdtool', []) .controller('passwordcontroller', ['$scope', function($scope) { $scope.pass = "password"; $scope.hash = "a hash"; }]); angular.module('passwdtool2', []) .controller('passwordcontroller2', ['$scope', function($scope) { $scope.pass = "password"; $scope.hash = "a hash"; }]); the output:
password: [
password]
hash
password: []
{{ hash }}
what going on?
angularjs tries find first ng-app , boots it. if defining other ng-app inside html, have explicitly boot them.
the function :
angular.bootstrap(<elements on ng-app attached>, <ng-app name>); in case should like:
var domelement = document.getelementbyid('app2'); //attach app2 id element. angular.bootstrap(domelement, ["passwdtool2"]); this functions used in case want multiple ng-apps on same page. see fiddle, have modified on yours: https://jsfiddle.net/7bew5q0r/2/
plus, dont need second ng-app, since angular going ignore anyway. updating that: https://jsfiddle.net/7bew5q0r/3/
Comments
Post a Comment