ngView內部的模板調用不支持角度指令stackoverflow

我的問題涉及如何在AngularJS應用程序中的ngView內調用模板中使用AngularJS directives。ngView內部的模板調用不支持角度指令stackoverflow

定義：
該應用程序是單頁，所以加載包含在與所述NG-視圖屬性的DOM div元素（模板URL）一個index.html。

Main Page(的index.html) :

<html data-ng-app="App" data-ng-controller="AppCtrl"> 
    <head> 
    <title>Angular App</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> 
    <script src="js/app.js"></script> 
    </head> 
<body> 
<!-- primary nav --> 
<a href="#/page1">Page 1</a> 
<a href="#/page2">Page 2</a> 
<a href="#/page3">Page 3</a> 

<!-- display the view --> 
<div ng-view> 
</div> 
</body> 
</html>

app.js：

angular.module('App', []) 

.controller('AppCtrl', function($rootScope, appLoading) { 
    $rootScope.topScope = $rootScope; 
    $rootScope.$on('$routeChangeStart', function() { 
     appLoading.loading(); 
    }); 
    }) 

.config(function($routeProvider) { 
    $routeProvider.when('/page1', { 
     controller : 'Page1Ctrl', 
     templateUrl : 'page1.html' 
    }) 
    .when('/page2', { 
     controller : 'Page2Ctrl', 
     templateUrl : 'page2.html' 
    }) 
    .when('/page3', { 
     controller : 'Page3Ctrl', 
     templateUrl : 'page3.html' 
    }) 
    .otherwise({ 
     redirectTo: '/home' 
    }); 
    })

page1.html：

<div class="form"> 
<form class="login-profile" method="post" action="" name="editfrm"> 
<input type="text" name="email" value="" id="txtemail" data-ng-model="email" required> 
<input type="password" name="password" value="" id="txtpassword" data-ng-model="password" required> 
<input type="button" value="Save" name="submit"> 
</form> 
</div>

問題： 模板Url在ngView內部調用不支持任何AngularJS deirective。 data-ng-model="email" & data-ng-model="password"在ngView呼籲點擊鏈接<a href="#/page1">Page 1</a>

任何幫助不工作時可以理解的。謝謝

來源

2015-05-18 Rohit Jindal

@MikkoViitala，能否請你幫我精心更多的評論。 –

是的，發佈Page1Ctrl的JS代碼。 –

沒有看到代碼，您Page1Ctrl這很難說，但它好像你正在嘗試使用$rootScope控制器之間的數據共享，沒有？

好吧，就是不要。使用$routeParams或爲此目的的服務。例如：

// app controller 
.controller('AppCtrl', function(User) { 
    User.set({email:'email', password:'password'}); // set user 
}) 

// page 1 controller 
.controller('Page1Ctrl', function($scope, User) { 
    $scope.user = User.get(); // get user 
}) 

// user service  
.service('User', function() { 
    var user = null; 
    return { 
    get: function() { 
     return user; 
    }, 
    set: function(val) { 
     user = val; 
    } 
    }; 
});

和相關的HTML

<input type="text" 
     name="email" 
     data-ng-model="user.email" 
     required> 
<input type="password" 
     name="password" 
     data-ng-model="user.password" 
     required>

來源

2015-05-18 06:37:38

謝謝..我在找它.. :) –

當您點擊<a href="#/page1">Page 1</a>時，它加載Page1Ctrl和page1.html。您確定您無法訪問Page1Ctrl中的$scope.email和$scope.password。

它應該是可訪問的，如果沒有則嘗試如下創建一個模型對象：

$scope.LoginProfile = { 
     email: '', 
     password: '' 
}

，並在您page1.html使用LoginProfile對象這樣LoginProfile.email和LoginProfile.password。

PS：儘量插在HTML以便您可以查看值（例如LoginProfile: {{LoginProfile}}）

來源

2015-05-18 06:03:06 vs4vijay

感謝您的回答，我會嘗試以這種方式實現它..是否有任何需要在page1.html中調用'angularJS.min'腳本？因爲它已經在主頁（index.html）中調用 –

No.在SPA上，只有入口點（index.html）包含庫js（angular，bootstrap等）和css文件。其他htmls只是使用ajax調用注入''的模板或部分。所以你不需要在'page1.html'中包含'angular.min.js'（或任何其他的js）。 – vs4vijay

好的..感謝這個.. :) –

ngView內部的模板調用不支持角度指令stackoverflow

回答

相關問題