我是AngularJS的新手,找不到合适的答案.我的应用程序目前包含通过Angular显示的项目列表.还有一个标签显示当前所选项目的名称,还有一个输入框,允许修改当前所选项目的名称.
我无法弄清楚的是如何同时:
目前,我正试图通过一个标志对项目跟踪哪个项目是当前的,这不是我想要的.理想情况下我会取代currentItem在下面以直接引用该项目items与isCurrent=true.
当前项目名称标签:
`<div id="CurrentItem" data-ng-model="currentItem">{{currentItem.name}}</div>`
当前项目名称输入框:
`<input id="ItemName" type="text" data-ng-model="currentItem" value="{{currentItem.name}}" />`
显示所有项目:
<div data-ng-repeat="item in items" data-ng-click="changeItem(item)">`
<img src="images/ItemIcon.png">
<div>{{item.name}}</div>
控制器:
var CoreAppController = function($scope, $location) {
$scope.changeItem = function(item) {
var length = $scope.items.length;
while(length-- ) {
$scope.items[length].isCurrent = false;
}
$scope.currentItem = item;
$scope.items.indexOf(item).isCurrent = false;
}
$scope.createItem = function(name, layout) {
$scope.items.push({ id: $scope.items.length + 1,
name: name,
isCurrent: false
});
}
// Initialisation
$scope.items …真的在努力奋斗 - 尝试过各种我能想到的方式.希望有人可以提供帮助.
我有一个指令,为我创建自定义控件的轮廓.自定义控件的核心部分将由另一个动态生成的指令表示,该指令基于外部指令上的作用域变量的值.scope变量包含inner指令的名称.我这样做是因为我的页面将有多个动态生成的元素,所有元素都具有共同的布局但内部内容不同.
即我的外部指令的一个例子:
<div data-inner="{{inner}}">
<!-- div content here --->
<div {{inner}} />
{{inner}}设置为另一个指令的名称 - 在这种情况下search.因此我的页面应该成为:
<div data-inner="search">
<!-- div content here --->
<div search />
与search在较低DIV也被在该指令的内容所取代.
有任何想法吗？
更新 这里是一个基本的jsFiddle代表我有的问题 - 注意第三个div没有显示.
我似乎无法找到一个似乎是一个合理问题的答案.
我使用$ http服务为我的所有应用程序调用Web服务.所有服务器API都托管在特定地址.有没有什么方法可以让$ http总是在提供的URL前面加上API服务器的前缀？
例如,如果我的API处于http://myAPi/API/,我希望能够调用:
$http.get("User")...
而不是:
$http.get("http://myAPI/API/User")
Angular将请求作为服务器地址的前缀.目的是不在整个应用程序中传播URL.
有没有办法用Angular实现这个目标？
我有一个指令从外部HTML文件加载内容.传递给该指令的是一些范围数据,用于呈现该HTML片段.例如
<div class="{{cls}}" data-obj="{{obj}}" data-id="{{id}}">
<!-- remainder of content here -->
</div>
我想在这个指令中做的是根据传递给指令的原始范围数据在其中加载另一个HTML部分.我似乎无法让这个工作,但它应该是以下几点:
<div class="{{cls}}" data-obj="{{obj}}" data-id="{{id}}">
<!-- remainder of content here -->
<div ng-include="partials/{{obj}}.html></div>
</div>
使用此文件,文件不会包含在内,但我也没有收到任何错误.有人可以帮我吗？
注意:我读过这个,这是一个类似的问题,但没有帮助我.
更新 - 我在Chrome开发工具中注意到URL正在按预期解析,但文件内容未包含在内.我从ng-include加载和编译所请求片段的文档中想到了,所以我期待这个工作.
我正在尝试使用flexbox模型来创建一个总是延伸到屏幕边界的多列布局.这完全符合我的意愿.但是,我还希望能够水平调整一个或多个列的大小.我已经尝试使用jQuery UI来允许调整大小,但不出所料,这不太正常
如下面的演示所示,当您开始调整列的大小时,它会"跳跃"大约100个像素.
任何人都可以为此提供解决方案,或者另一种动态调整Flexbox容器大小的方法吗？所有代码也粘贴在下面.
HTML:
<div id="container">
<div id="box1" class="widget-container">
<div class="widget">
<div class="widget-content">
Item 1
</div>
</div>
<div class="widget">
<div class="widget-content">
Item 2
</div>
</div>
</div>
<div id="box2" class="widget-container">
<div class="widget">
<div class="widget-content">
Item 3
</div>
</div>
</div>
<div id="box3" class="widget-container">
<div class="widget">
<div class="widget-content">
Item 4
</div>
</div>
<div class="widget">
<div class="widget-content">
Item 5
</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
}
body {
position: absolute;
height: auto;
top: 0;
left: 0; …我正在尝试创建一个具有"加载"状态的可重用按钮指令.也就是说,单击它时会禁用自身并显示内嵌图像以表示加载,然后在完成时将其删除.我这样做是通过在click方法中设置一个范围变量并取消设置它来改变按钮的状态.
我想要点击它在父作用域中时调用的方法,并且我还希望它挂钩到父作用域的验证,因此当父表单无效时它会自动禁用它.这些是我开始工作有困难的部分 - 我知道我的问题与范围有关,但我被困住了.
<loading-button class="login" data-ng-click="login()" text="Login" toggle="loaded"></loading-button>
我希望做类似下面的事情,但是如何绑定在指令实例上声明的click方法实际上从指令调用？或者,这是不好的做法？这目前不起作用.
angular.module("App.directives").directive("loadingButton", function () {
return {
restrict: "E",
replace: true,
transclude: true,
template: '<button data-ng-click="{{ngClick}}">{{text}}<img class="loading" src="images/ButtonLoader.gif" alt=""></button>',
scope: {
"toggle": "=",
"text": "=",
"ng-disabled": "=",
"disabled": "=",
"ngClick": "&"
},
link: function(scope, element, attributes) {
scope.text = attributes.text;
var expression = attributes.toggle;
scope.$watch(expression, function(newValue, oldValue) {
if(newValue === oldValue) {
return;
}
if(newValue) {
element.removeAttr("disabled");
element.find("img.loading").hide();
}
else {
element.attr("disabled", "disabled");
element.find("img.loading").show();
}
});
}
};
});
在父作用域中使用如下:
$scope.login …我敢肯定有一个简单的答案,我错过了.
http://jsfiddle.net/jonathanwest/pDRxw/3/
本质上,我的指令将包含控件,这些控件总是在指令本身外部的控制器中调用相同的方法.正如你从上面的小提琴中看到的那样,我可以通过在control指令上使用方法定义属性来完成这项工作,但是因为该方法将始终从指令中的相同按钮调用,所以我不想要定义要打电话的方法.相反,指令应该知道在edit按下该按钮时调用控制器方法.因此,定义control将是:
<control title="Custom Title" />
我怎样才能做到这一点？
我无法在我的AngularJS模块上进行简单的Jasmine测试.任何建议将非常感谢.
带控制器的模块:
(function(myApp) {
myApp.App = angular.module("MyApp", []).
config(["$routeProvider", function($routeProvider) {
$routeProvider.
when('/', { controller: "CoreAppController", templateUrl: 'App.html' }).
otherwise({ redirectTo: '/' });
}]);
myApp.App.controller("CoreAppController", function($scope, $http, widgetService) {
/* controller definition */
}
}(window.myApp = window.myApp || {}));
单元测试:
(function(myApp) {
describe("CoreAppController spec", function() {
describe("Create the CoreApp", function() {
beforeEach(angular.module("MyApp"));
describe("CoreAppController", function() {
it("Should create the core application",
expect(1).toBeGreaterThan(0)
)
});
})
});
}(window.myApp = window.myApp || {}));
测试文件中包含的文件按以下顺序排列:
运行此测试会导致以下错误:
TypeError:对象#在jasmine.Block.exe(文件:/// C:/TeamFoundation/PRE/test/jasmine/jasmine.js:1064:17)jasmine.Queue.next_上没有方法'apply'(文件: …