是否可以在AngularJS控制器中创建HTML片段并在视图中显示此HTML？
这需要将不一致的JSON blob转换为嵌套的id : value对列表.因此,HTML是在控制器中创建的,我现在希望显示它.
我创建了一个模型属性,但是如果不打印HTML,则无法在视图中呈现它.
更新
似乎问题来自角度渲染创建的HTML作为引号内的字符串.将试图找到解决这个问题的方法.
示例控制器:
var SomeController = function () {
this.customHtml = '<ul><li>render me please</li></ul>';
}
示例视图:
<div ng:bind="customHtml"></div>
给:
<div>
"<ul><li>render me please</li></ul>"
</div>
我正在尝试在其中包含一个HTML代码段ng-repeat,但我无法让include工作.似乎当前的语法与ng-include以前的语法不同:我看到许多例子使用
<div ng-include src="path/file.html"></div>
但在官方文档中,它表示要使用
<div ng-include="path/file.html"></div>
但是然后在页面上显示为
<div ng-include src="path/file.html"></div>
无论如何,我试过了
<div ng-include="views/sidepanel.html"></div>
<div ng-include src="views/sidepanel.html"></div>
<ng-include src="views/sidepanel.html"></ng-include>
<ng-include="views/sidepanel.html"></ng-include>
<ng:include src="views/sidepanel.html"></ng:include>
我的代码片段不是很多代码,但是它有很多内容; 我在里面ng-repeat读动态加载模板可能会导致问题,所以我用sidepanel.html单词替换了内容foo,但仍然没有.
我也尝试直接在页面中声明模板,如下所示:
<script type="text/ng-template" id="tmpl">
foo
</script>
并贯穿ng-include引用脚本的所有变体,但id仍然没有.
我的页面中有更多内容,但现在我已将其删除到这个:
<!-- index.html -->
<html>
<head>
<!-- angular includes -->
</head>
<body ng-view="views/main.html"> <!-- view is actually set in the router -->
<!-- views/main.html -->
<header>
<h2>Blah</h2>
</header> …我正在与AngularJS合作完成我的最新项目.在文档和教程中,所有模型数据都放入控制器范围.我知道必须存在控制器,因此在相应的视图中.
但是,我不认为该模型应该在那里实施.它可能很复杂并且具有私有属性.此外,人们可能希望在另一个上下文/应用程序中重用它.将所有内容放入控制器完全打破了MVC模式.
对于任何模型的行为都是如此.如果我使用DCI架构并从数据模型中分离行为,我将不得不引入其他对象来保存行为.这可以通过引入角色和上下文来完成.
当然,模型数据和行为可以使用普通的javascript对象或任何"类"模式来实现.但AngularJS的做法是什么呢？使用服务？
所以它归结为这个问题:
在AngularJS最佳实践之后,您如何实现与控制器分离的模型？
这是我的HTML表单:
<form name="myForm" ng-submit="">
<input ng-model='file' type="file"/>
<input type="submit" value='Submit'/>
</form>
我想从本地计算机上传图像,并想要读取上传文件的内容.我想用AngularJS做的所有这些.
当我尝试打印$scope.file它的值时,它是未定义的.
我尝试在输入标签上使用ng-model和类型文件:
<input type="file" ng-model="vm.uploadme" />
但是在选择文件后,在控制器中,$ scope.vm.uploadme仍未定义.
如何在控制器中获取所选文件？
我使用Node/Express创建了一个小API并尝试使用Angularjs来提取数据,但是当我的html页面在localhost:8888上运行apache并且节点API在端口3000上侦听时,我得到了No'Access-Control-允许来源.我尝试使用node-http-proxy和Vhosts Apache但没有取得多大成功,请参阅下面的完整错误和代码.
"XMLHttpRequest无法加载localhost:3000.请求的资源上没有'Access-Control-Allow-Origin'标头.因此不允许来自"localhost:8888"."
// Api Using Node/Express
var express = require('express');
var app = express();
var contractors = [
{
"id": "1",
"name": "Joe Blogg",
"Weeks": 3,
"Photo": "1.png"
}
];
app.use(express.bodyParser());
app.get('/', function(req, res) {
res.json(contractors);
});
app.listen(process.env.PORT || 3000);
console.log('Server is running on Port 3000')
我正在尝试使用发布请求将文件发送到我的服务器,但是当它发送它时会导致错误:
$http.post($rootScope.URL, {params: arguments}, {headers: {
"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}
所以我用Google搜索了错误并添加了标题:
$http.post($rootScope.URL, {params: arguments}, {headers: {
"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}
然后我得到错误:
$http.post($rootScope.URL, {params: arguments}, {headers: {
"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}
所以我用谷歌搜索了那个,我能找到的唯一类似的问题提供了一个半答案然后关闭作为主题.我应该添加/删除哪些标题？
我试图使用AngularJS提供的ng-show和ng-hide函数显示/隐藏一些HTML .
根据文档,这些功能的用途如下:
ngHide - {expression} - 如果表达式为truthy,则元素分别显示或隐藏.ngShow - {expression} - 如果表达式是真实的,那么元素将分别显示或隐藏.
这适用于以下用例:
<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>
但是,如果我们使用来自对象的参数作为表达式,那么ng-hide并ng-show给出正确的true/ false值,但这些值不会被视为布尔值,所以总是返回false:
资源
<p ng-hide="{{foo.bar}}">I could be shown, or I could be hidden</p>
<p ng-show="{{foo.bar}}">I could be shown, or I could be hidden</p>
结果
<p ng-hide="true">I should be hidden but I'm actually shown</p>
<p ng-show="true">I should be shown but I'm actually hidden</p>
这可能是一个错误,或者我没有正确地执行此操作.
我找不到关于引用对象参数作为表达式的任何相关信息,所以我希望任何对AngularJS有更好理解的人都可以帮助我吗？
我想为我的应用启用HTML5模式.我已经把下面的代码的配置,如图所示在这里:
return app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix = '!';
$routeProvider.when('/', {
templateUrl: '/views/index.html',
controller: 'indexCtrl'
});
$routeProvider.when('/about',{
templateUrl: '/views/about.html',
controller: 'AboutCtrl'
});
正如你所看到的,我使用了$locationProvider.html5mode和我改变了我所有的链接ng-href来排除/#/.
目前,我可以去localhost:9000/看看索引页面并导航到其他页面localhost:9000/about.
但是,刷新localhost:9000/about页面时会出现问题.我得到以下输出:Cannot GET /about
如果我看一下网络电话:
Request URL:localhost:9000/about
Request Method:GET
如果我先去localhost:9000/,然后点击导航到的按钮,/about我会得到:
Request URL:http://localhost:9000/views/about.html
这使页面完美呈现.
如何在刷新时启用角度来获取正确的页面？
我是AngularJS的新手,一开始,我想只使用AngularJS开发一个新的应用程序.
我正在尝试使用$http我的Angular App 对服务器端进行AJAX调用.
为了发送参数,我尝试了以下方法:
$http({
method: "post",
url: URL,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $.param({username: $scope.userName, password: $scope.password})
}).success(function(result){
console.log(result);
});
这是有效的,但它也使用jQuery $.param.为了消除对jQuery的依赖,我尝试了:
data: {username: $scope.userName, password: $scope.password}
但这似乎失败了.然后我尝试了params:
params: {username: $scope.userName, password: $scope.password}
但这似乎也失败了.然后我尝试了JSON.stringify:
data: JSON.stringify({username: $scope.userName, password: $scope.password})
我找到了这些可能的答案,但没有成功.难道我做错了什么？我相信,AngularJS会提供这个功能,但是如何？