Tag: angularjs

使用Angular ui-router设置URL查询参数，无需更改状态

我应该如何使用AngularJS的ui-router更新查询参数来更新地址栏URL，以便在刷新页面时保持状态？ 目前，我使用$state.transitionTo('search', {q: 'updated search term'})每当input更改，但问题是，这重新加载控制器，重绘窗口，失去了任何文字input焦点。 有没有办法更新stateParams并将其同步到窗口的URL？

指令模板元素的唯一ID

我有一个可以在页面上多次使用的指令。 在这个指令的模板中，我需要使用ID作为input-Element，这样我就可以像这样“绑定”Label： <input type="checkbox" id="item1" /><label for="item1">open</label> 现在的问题是，只要我的指令被包含多次，ID“item1”不再是唯一的，标签不能正常工作（点击时应该选中/取消选中checkbox）。 这个问题是如何解决的？ 有没有办法给模板分配一个“命名空间”或“前缀”（如asp.net与ctl00 …-前缀）？ 还是必须在每个id-Attribute中包含一个angular度expression式，该angular色由来自Scope +静态ID的指令ID组成。 就像是： <input type="checkbox" id="{{directiveID}} + 'item1'" /><label for="{{directiveID}} + 'item1'">open</label> 编辑： 我的指令 module.directive('myDirective', function () { return { restrict: 'E', scope: true, templateUrl: 'partials/_myDirective.html', controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) { … } //controller }; }]); 我的HTML <div class="myDirective"> <input […]

如何理解指令的`terminal`？

在这个页面中： http : //docs.angularjs.org/guide/directive 指令定义对象 终奌站 如果设置为true，那么当前优先级将是将要执行的最后一组指令（当前优先级的任何指令仍将执行，因为相同优先级上的执行次序是未定义的）。 我不太明白。 current priority是什么意思？ 如果有这样的指示： 指令1与{优先级：1，terminal：假} 指令2与{优先级：10，terminal：假} 指令3与{优先级：100，terminal：假} 指令4 with {priority：100，terminal：true} //这是真的 指令5 with {priority：1000，terminal：false} 请注意directive4有terminal:true ，其他人有false 。 如果有一个html标签有所有的5个指令： <div directive1 directive2 directive3 directive4 directive5></div> 5个指令的执行顺序是什么？

错误：未知提供者：$ routeProvider

我正试图让一个AngularJS 1.2 RC2应用程序运行。 目前，我一直在使用Angular Seed项目来尝试启动我的应用程序。 不幸的是， Angular Seed项目使用v1.0.7。 从Angular Seed项目中，我已经更新了依赖关系如下： $script([ 'res/js/angular-1.2.0-rc.2.js', 'res/js/angular-route-1.2.0-rc.2.js', 'res/js/app.js?v=2', ], function() { // when all is done, execute bootstrap angular application angular.bootstrap(document, ['myApp']); }); 在app.js中，我有以下几点： 'use strict'; angular.module('myApp', []). config(['$routeProvider', function($routeProvider) { $routeProvider.otherwise({redirectTo: '/home'}); }]); 当我运行这个应用程序，我得到以下错误： Error: [$injector:unpr] Unknown provider: $routeProvider 我已经阅读了其他的一些回应，比如1）Inject'ngroute'或者2）你需要在路由中定义控制器。 我的问题是，我不明白如何注入ngroute。 另外，我真的需要在路由中定义控制器吗？ 这种方法似乎不可扩展。 我的应用程序可能有一千个意见。 在我看来，似乎必须有方法来定义路线，而无需加载所有的控制器。

AngularJS指令绑定一个函数与多个参数

我遇到了一些麻烦，在一个指令中用一个callback函数绑定一个控制器中定义的函数。 我的代码如下所示： 在我的控制器中： $scope.handleDrop = function ( elementId, file ) { console.log( 'handleDrop called' ); } 那么我的指示是： .directive( 'myDirective', function () { return { scope: { onDrop: '&' }, link: function(scope, elem, attrs) { var myFile, elemId = […] scope.onDrop(elemId, myFile); } } ); 并在我的HTML页面： <my-directive on-drop="handleDrop"></my-directive> 上面的代码没有运气。 从我读过的各种教程中，我明白我应该在HTML页面中指定参数？

根据模型数据有条件地更改img src

我想用Angular将模型数据表示为不同的图像，但是在find“正确”的方法时遇到了一些麻烦。 expression式的Angular API文档说不允许条件expression式… 简化了很多，模型数据通过AJAX获取并显示路由器上每个接口的状态。 就像是： $scope.interfaces = ["UP", "DOWN", "UP", "UP", "UP", "UP", "DOWN"] 所以，在Angular中，我们可以用类似的方式显示每个接口的状态： <ul> <li ng-repeat=interface in interfaces>{{interface}} </ul> 但是 – 而不是模型的值，我想展示一个合适的图像。 这个大概的想法。 <ul> <li ng-repeat=interface in interfaces> {{if interface=="UP"}} <img src='green-checkmark.png'> {{else}} <img src='big-black-X.png'> {{/if}} </ul> （我认为Ember支持这种types的构造） 当然，我可以修改控制器根据实际的模型数据返回图像的URL，但这似乎违反了模型和视图的分离，不是吗？ 这个SO贴子build议使用一个指令来改变bg-img源码。 但是，然后我们又回到了JS的url，而不是模板… 所有的build议感激。 谢谢。 请原谅任何错误

AngularJS指令元素方法绑定 – TypeError：不能使用'in'操作符来search1中的'functionName'

这是主模板的控制器： app.controller('OverviewCtrl', ['$scope', '$location', '$routeParams', 'websiteService', 'helperService', function($scope, $location, $routeParams, websiteService, helperService) { … $scope.editWebsite = function(id) { $location.path('/websites/edit/' + id); }; }]); 这是指令： app.directive('wdaWebsitesOverview', function() { return { restrict: 'E', scope: { heading: '=', websites: '=', editWebsite: '&' }, templateUrl: 'views/websites-overview.html' } }); 这是指令如何在主模板中应用： <wda-websites-overview heading="'All websites'" websites="websites" edit-website="editWebsite(id)"></wda-websites-overview> 这是从指令模板（website-overview.html）调用的方法： <td data-ng-click="editWebsite(website.id)">EDIT</td> 问题：单击编辑时，控制台中将显示此错误： TypeError：不能使用'in'运算符来search1中的'editWebsite' […]

AngularJS：如何发送具有$资源请求的authentication令牌？

我想从我的API请求资源时发送一个授权令牌。 我没有使用$ resource实现一个服务： factory('Todo', ['$resource', function($resource) { return $resource('http://localhost:port/todos.json', {port:":3001"} , { query: {method: 'GET', isArray: true} }); }]) 我有一个存储auth令牌的服务： factory('TokenHandler', function() { var tokenHandler = {}; var token = "none"; tokenHandler.set = function( newToken ) { token = newToken; }; tokenHandler.get = function() { return token; }; return tokenHandler; }); 我想从tokenHandler.get发送令牌，通过Todo服务发送每个请求。 我可以通过将其发送到特定行动的呼叫中来发送它。 例如这个工程： Todo.query( […]

在Angular中的unit testing指令控制器，而不使控制器成为全局的

在Vojta Jina出色的存储库中，他演示了指令的testing，他定义了模块包装器之外的指令控制器。 看到这里： https ： //github.com/vojtajina/ng-directive-testing/blob/master/js/tabs.js 这不是不好的做法，并污染全球命名空间？ 如果有另一个地方可能是合理的调用TabsController，是不是会打破东西？ 上述指令的testing可以在这里find： https ： //github.com/vojtajina/ng-directive-testing/commit/test-controller 是否有可能独立于指令的其余部分testing指令控制器，而不将控制器置于全局名称空间中？ 将整个指令封装在app.directive（…）定义中将会很好。

如何testing一个元素是否使用了量angular器的类？

我正在尝试Protactor e2etestingAngular应用程序，并没有想出如何检测一个元素是否具有特定的类。 在我的情况下，testing点击提交button，现在我想知道表单[名称=“getoffer”]类.ngDirty。 什么可能是解决scheme？ describe('Contact form', function() { beforeEach(function(){ browser.get('http://localhost:9000'); element(by.linkText('Contact me')).click(); }); it('should fail form validation, all fields pristine', function() { element(by.css('.form[name="getoffer"] input[type="submit"]')).click(); expect(element(by.name('getoffer'))).toHaveClass('ngDirty'); // <– This line }); });