标签: ng-view
AngularJS在一个页面中有多个模板
我有一个提供静态标题菜单的索引,在下面是基于路由的ng视图,选择正确的模板.像这样例如:
<navbar>
...
</navbar>
<div ng-view>
</div>
到目前为止一切都很好,当一个特定的路线被击中时,一个模板被加载到具有相关控制器的容器中.
现在,我有另一个页面加载到ng-view中,并且当url"/ dashboard"被击中时它被触发.问题是仪表板页面有一个侧边栏菜单,还需要包含一些路由逻辑(或多或少).当从侧边栏菜单中单击链接时,我只需要加载页面的左侧(而不是整个ng-view容器).
我确定了两个解决方案:
1)创建一个存储该侧边栏菜单的指令,并将其注入由侧边栏菜单处理的所有页面中==>路由仍然由ng-view处理.
2)使用ng-include并在仪表板页面中有一些路由逻辑,如下所示:
<a ng-click="templateType = 1">Template 1</a>
<a ng-click="templateType = 2">Template 1</a>
<div ng-if="templateType === 1" ng-include="template1"
ng-controller="Template1Controller"></div>
<div ng-if="templateType === 2" ng-include="template2"
ng-controller="Template2Controller"></div>
还有另一种方法吗？或者处理处理某些路线的侧边栏和处理其他路线的静态菜单的最佳做法是什么,并提到侧边栏菜单仅在某些路线上可用.
我提供了绘画,希望能更好地解释我的问题.
angularjs angular-routing angularjs-directive angular-template ng-view
推荐指数
解决办法
查看次数
AngularJS App:从JSON加载一次数据并在多个控制器中使用它
我正在使用AngularJS作为框架开发移动应用程序,目前我的结构类似于:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'homeCtrl'
})
.when('/one', {
templateUrl : 'pages/one.html',
controller : 'oneCtrl'
})
.when('/two', {
templateUrl : 'pages/two.html',
controller : 'twoCtrl'
});
}]);
app.controller('homeCtrl', ['$scope', function($scope) {
}]);
app.controller('oneCtrl', ['$scope', function($scope) {
}]);
app.controller('twoCtrl', ['$scope', function($scope) {
}]);
然后我用以下内容显示内容ng-view:
<div class="ng-view></div>
事情进展顺利,但我需要从JSON文件加载数据以填充应用程序的所有内容.我想要的是只做一次 AJAX调用,然后通过我所有不同的控制器传递数据.在我的第一次尝试中,我想创建一个带有$http.get()内部服务的服务,并将其包含在每个控制器中,但它不起作用,因为每次注入和使用服务时它都会产生不同的ajax请求.因为我是新的使用角度我想知道什么是最好的方式或更多的"角度方式"来实现这一点而不会弄乱它.
编辑:我正在添加服务的代码,这只是一个简单的$http.get请求:
app.service('Data', ['$http', function($http) {
this.get = function() {
$http.get('data.json')
.success(function(result) {
return result;
})
}
});
推荐指数
解决办法
查看次数
不确定何时使用ng-view或ng-include
我最近在局部视图中使用了ng-view,它看起来很像使用ng-include.两者之间是否存在差异:ng-view指令和ng-include或何时更好地使用哪个？
推荐指数
解决办法
查看次数
Angular不在ng-view上更新ng-class
我正在使用角度1.6.5进行角度应用,并且遇到了一种非常奇怪的行为.
我想要实现的是:当更改ngroute时,我必须从当前视图中删除活动类,等待完成离开动画,然后将活动类添加到新视图.
我在配置中设置了app和routs.
var app = angular.module('app', ['ngAnimate', 'ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl:"home.html",
reloadOnSearch:false
})
.when('/about-us', {
templateUrl:"about.html",
reloadOnSearch:false
})
.when('/contact', {
templateUrl:"contact.html",
reloadOnSearch:false
})
.otherwise({
template : "<h1>None</h1><p>Nothing has been selected</p>"
});
});
我有一个服务,我存储动画时间和布尔指示视图的可见性:
app.service('animationProperties', function () {
this.animationTimings = {
views: 1000
};
this.visibility = {
view : false
};
});
我有一个主控制器具有简单的调试功能和一个onRouteChangeStart函数,它应该从当前视图中删除活动类(通过使视图可见性布尔为false):
app.controller('MainCtrl', function ($scope, $window, $location,
animationProperties) {
$scope.animationProperties = animationProperties;
$scope.$on('$routeChangeStart',function () {
animationProperties.visibility.view = false;
});
$scope.toggleActive = function(){
$scope.animationProperties.visibility.view = !$scope.animationProperties.visibility.view; …推荐指数
解决办法
查看次数
ng-view不会显示模板
我一直在使用Angular,我试图实现简单的路由.我有一个基本的HTML,其中包含对所有必需脚本和ng-view标记的引用.
出于某种原因,当加载页面时,模板不会显示在该ng-view位置.为什么不显示,以及如何修复它？
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
<script src="routCtrl.js"></script>
</head>
<body ng-app='ngRouteTest'>
<div ng-view></div>
</body>
和脚本文件:
var ngRouteTest = angular.module('ngRouteTest',['ngRoute']);
ngRouteTest.config(function($routeProvider){
$routeProvider
.when('/',
{templateUrl : '/routView1.html'})
});
推荐指数
解决办法
查看次数
如何在ng-view(angularjs)中使用常规javascript代码
第一次在这里使用angularJS.基本上,我使用了路由服务,所以我有一个带有html代码的模板中的路由调用.我还拥有模板中的代码正确显示所需的所有常规javascript函数(幻灯片演示以及许多其他内容).
当我运行时,我得到所有这些空错误(似乎我的JS函数无法找到各种元素,因为它无法访问ng-view /模板中的代码,或者它在ng-view/template加载之前运行).
当我将所有javascript函数粘贴到我为该模板指定的控制器中时,它可以工作.但我有一种感觉,我不应该这样做.使这项工作的正确方法是什么？谢谢.
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/",{
templateUrl:"about.html",
controller:"aboutCtrl"
})
.when("/aboutus", {
templateUrl:"entertainment.html"
})
});
app.controller('aboutCtrl', function($scope){
//placed regular javascript/jquery code here to make it work
});
推荐指数
解决办法
查看次数
AngularJs:ng-include放置在ng-view标签内时不起作用
我正在通过ng-view内的有角度路径加载一个html页面.我正在加载的页面包含一个ng-include标记,指向另一个html文件.
我尝试了以下所有语法=
<div ng-include src="'some.jsp'"></div>
<div ng-include="'login.jsp'"></div>
<div ng-include src="include.url"></div>
没有工作.但是,如果我在ng-view之外放置相同的标签,它的工作正常.
我究竟做错了什么？
推荐指数
解决办法
查看次数
如何让Angular-Flask app加载html partials？
我试图让我的Angular-Flask应用程序在基本的html文件中呈现部分HTML文件.应用程序加载基本html(窗口标题和页脚加载)但没有加载ng-view.也许我对部分的角度路由不正确？
文件结构
->flaskapp
->static
->js
->appController.js
->routing.js
->homeController.js
...
->views
->home
->__init__.py
...
->templates
->partials
->home.html
...
->base.html
家
mod = Blueprint('home', __name__)
@mod.route('/')
def index():
return render_template('main.html')
base.html文件
<!DOCTYPE html>
<html ng-app="FlaskApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src=/static/js/appController.js></script>
<script src=/static/js/homeController.js></script>
<script src=/static/js/bootstrap.js></script>
{% block head %}
<meta charset="UTF-8">
<title>{% block title %}{% endblock %} - Flask POC</title>
{% endblock %}
</head>
<body>
<div ng-controller="AppController">
<div ng-view>
</div>
<br />
<div id="footer">
{% block footer …推荐指数
解决办法
查看次数
Angular JS ng-view更改商店滚动位置
我使用按钮单击更改到下一页的路线.Angular JS保留滚动位置,不会滚动到ng-view的顶部.1.禁用$ anchorScroll不起作用2.使用窗口滚动不起作用
$rootScope.on("$routeChangeSuccess", function(){
window.scrollTo(0,90);
})
但是,要在iPad上保留修复标题,以下窗口滚动工作.
$(document).on('blur', 'input, textarea', function() {
setTimeout(function() {
window.scrollTo(document.body.scrollLeft,document.body.scrollTop);
}, 0);
});
有什么建议？如何通过angualar js视图清除存储的滚动位置？
推荐指数
解决办法
查看次数
如何在角度ng视图中隐藏index.html页面的某些内容？
当我访问angularjs中的视图时,我想知道是否可以隐藏index.html文件中的某些部分.
我的index.html文件包含所有视图的底部菜单栏,我创建了一个home.html视图,我不想包含该菜单栏.角度有可能吗？
谢谢!
推荐指数
解决办法
查看次数
标签 统计
angularjs ×10
ng-view ×10
javascript ×5
flask ×1
html ×1
jinja2 ×1
ng-animate ×1
ng-hide ×1
templates ×1