Tag: angularjs

如何使用AngularJS重新加载或重新呈现整个页面

在基于几个用户上下文呈现整个页面并且创build了几个$http请求之后，我希望用户能够切换上下文并重新呈现所有内容（重新发送所有$http请求等）。 如果我只是将用户redirect到其他地方，事情就能正常工作： $scope.on_impersonate_success = function(response) { //$window.location.reload(); // This cancels any current request $location.path('/'); // This works as expected, if path != current_path }; $scope.impersonate = function(username) { return auth.impersonate(username) .then($scope.on_impersonate_success, $scope.on_auth_failed); }; 如果我使用$window.location.reload() ，那么等待响应的auth.impersonate(username)上的一些$http请求被取消，所以我不能使用它。 另外，hack $location.path($location.path())也不起作用（没有任何反应）。 有没有另外的方式来重新呈现页面，而无需再次手动发出所有请求？

如何在文件准备好的angular度控制器上运行function？

我在我的angular度控制器中有一个函数，我想这个函数在文档准备运行，但我注意到，angular度运行它，因为dom创build。 function myController($scope) { $scope.init = function() { // I'd like to run this on document ready } $scope.init(); // doesn't work, loads my init before the page has completely loaded } 任何人都知道我可以怎么做呢？

AngularJS ngClass条件

有没有什么办法让像ngClass这样的expression式成为一个条件expression式。 例如，我尝试了以下内容： <span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span> 这个代码的问题是，无论obj.value1是什么，类testing总是应用于元素。 这样做： <span ng-class="{test: obj.value2}">test</span> 只要obj.value2不等于真值，该类就不会被应用。 现在我可以在第一个例子中解决这个问题了： <span ng-class="{test: checkValue1()}">test</span> checkValue1函数如下所示： $scope.checkValue1 = function() { return $scope.obj.value === 'somevalue'; } 我只是想知道如果这是ngClass应该如何工作。 我也正在build立一个自定义指令，我想要做类似的事情。 然而，我找不到一种方法来观看expression式（也许这是不可能的，以及它如何工作的原因）。 这里是一个plnkr来展示我的意思： http://plnkr.co/edit/iSh0t8swDEyGbh7ylZg2?p=preview

如何在AngularJS中进行双向过滤？

AngularJS可以做的一件有趣的事情是对特定的数据绑定expression式应用filter，这是一种方便的方式来应用，例如，特定于文化的货币或模型属性的date格式。 在范围上计算属性也很好。 问题是这些function都不适用于双向数据绑定场景 – 从范围到视图只有单向数据绑定。 这似乎是在一个优秀的图书馆明显的遗漏 – 或者我错过了什么？ 在KnockoutJS中 ，我可以创build一个读/写计算属性，它允许我指定一对函数，一个被调用来获取属性的值，另一个在属性被设置时被调用。 这允许我实现文化感知input – 让用户input“$ 1.24”并将其parsing为ViewModel中的float，并在input中反映ViewModel中的变化。 我可以find类似的最接近的是使用$scope.$watch(propertyName, functionOrNGExpression); 这允许我在$scope中的一个属性发生变化时调用一个函数。 但是，这并不能解决文化意识的input问题。 注意当我尝试修改$watch方法本身内的$watch $watched属性时的问题： $scope.$watch("property", function (newValue, oldValue) { $scope.outputMessage = "oldValue: " + oldValue + " newValue: " + newValue; $scope.property = Globalize.parseFloat(newValue); }); （ http://jsfiddle.net/gyZH8/2/ ） 当用户开始input时，input元素会变得非常困惑。 我通过将属性分成两个属性来改进它，一个用于parsing值，另一个用于parsing值： $scope.visibleProperty= 0.0; $scope.hiddenProperty = 0.0; $scope.$watch("visibleProperty", function (newValue, oldValue) […]

多个顺序提取（）Promise

我必须做一个fetch()的序列Promise：我一次只有一个url，这意味着只有一个fetch() promise。 每次我收到一个json，这个包含另一个json的url，所以我必须做另一个fetch()承诺。 我能够与多个承诺，但在这种情况下，我不能做Promise.all() ，因为我没有所有的url，但只有一个。 这个例子不起作用，它全部冻结。 function fetchNextJson(json_url) { return fetch(json_url, { method: 'get' }) .then(function(response) { return response.json(); }) .then(function(json) { console.log(json); return json; }) .catch(function(err) { console.log('error: ' + error); }); } function getItems(next_json_url) { if (!(next_json_url)) return; get_items = fetchNextJson(next_json_url); interval = $q.when(get_items).then(function(response) { console.log(response); next_json_url = response.Pagination.NextPage.Href; }); getItems(next_json_url); } var […]

ng-click不能使用dynamic生成的HTML

HTML <table data-ng-table="tableParams" class="table table-bordered table-hover " style="border-collapse:collapse" data-ng-init="host.editSave = false" > <tr id="newTransaction"> </tr> <tr data-ng-repeat="host in hosts|filter:search:strict" > <td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostCd}}</td> <td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostName}}</td> </tr> </table> jQuery的 $('#newTransaction').append( '<td contenteditable><input type="text" class="editBox" value=""/></td>'+ '<td contenteditable><input type="text" class="editBox" value=""/></td>'+ '<td>'+ '<span>'+ '<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>'+ '</span>'+ '</td>' ); 有angular的脚本 $scope.create = function() […]

在AngularJS服务中caching承诺对象

我想要使​​用Promises在AngularJS中实现一个静态资源的dynamic加载。 问题：我有几个组件可能（或不是，取决于哪些显示，因此dynamic）需要从服务器获取静态资源。 一旦加载，它可以被caching整个应用程序的生活。 我已经实现了这个机制，但是我对Angular和Promises是新的，我想确定这是否是一个正确的解决scheme。 var data = null; var deferredLoadData = null; function loadDataPromise() { if (deferredLoadData !== null) return deferredLoadData.promise; deferredLoadData = $q.defer(); $http.get("data.json").then(function (res) { data = res.data; return deferredLoadData.resolve(); }, function (res) { return deferredLoadData.reject(); }); return deferredLoadData.promise; } 所以，只有一个请求被创build，接下来所有对loadDataPromise（）的调用都会返回第一个作出的承诺。 好像在进行中的要求或者前一个已经完成的要求。 但是cachingPromise是一个好的解决scheme吗？

AngularJS POST失败：针对预检的响应具有无效的HTTP状态码404

我知道有很多这样的问题，但是我没有看到任何问题已经解决了我的问题。 我已经使用了至less3个微框架。 他们都做了一个简单的POST失败，应该返回数据： angularJS客户端： var app = angular.module('client', []); app.config(function ($httpProvider) { //uncommenting the following line makes GET requests fail as well //$httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = '*'; delete $httpProvider.defaults.headers.common['X-Requested-With']; }); app.controller('MainCtrl', function($scope, $http) { var baseUrl = 'http://localhost:8080/server.php' $scope.response = 'Response goes here'; $scope.sendRequest = function() { $http({ method: 'GET', url: baseUrl + '/get' }).then(function successCallback(response) { […]

Angularjsdynamicng模式validation

我有一个表单，如果一个checkbox是假的，使用ng-required指令强制文本inputvalidation。 如果checkbox为true，则该字段将被隐藏，并将ng-required设置为false。 问题是，我也有一个正则expression式在input上指定的validation，以及使用NG模式angular度指令。 我遇到的问题是，如果用户填写一个无效的电话号码，选中该框禁用该input（因此不需要进一步的validation）表单将不允许提交，因为它是基于ng模式无效。 我试图通过添加一个ng-change函数来将input模型设置为null来解决这个问题，但是ng-pattern，因此这个字段在checkbox的初始设置中仍然被设置为false。 但是，如果我取消选中该框，将所有内容设置回初始表单加载，然后再次选中该框，表单有效并可以提交。 我不知道我错过了什么。 这是我迄今为止的ng-change代码： var phoneNumberRegex = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/; $scope.phoneNumberPattern = phoneNumberRegex; $scope.removeValidation = function() { if ($scope.cell._newUser === false) { $scope.request._number = ''; $scope.phoneNumberPattern = /[0-9a-zA-Z]?/; } else { $scope.phoneNumberPattern = phoneNumberRegex; } };

AngularJS：使用ui-router将对象传递到一个状态

我希望能够转换到一个状态，并使用ui路由器传递一个任意的对象。 我知道，通常使用$ stateParams，但我相信这个值插入到URL中，我不希望用户能够collections这些数据。 我想要做这样的事情。 $state.transitionTo('newState', {myObj: {foo: 'bar'}}); function myCtrl($stateParams) { console.log($stateParams.myObj); // -> {foo: 'bar'} }; 有没有办法做到这一点，而不编码到URL的值？