例如:
$stateProvider
.state('external', {
url: 'http://www.google.com',
})
url假设这是一个内部状态.我希望它像href或者那种效果.
我有一个将从ui路由构建的导航结构,我需要一个链接转到外部链接.不一定只是谷歌,这只是一个例子.
不是在链接中查找,也不是在$ state.href(' http://www.google.com ')中查找.在路由配置中以声明方式需要它.
routing angularjs single-page-application angularjs-routing angular-ui-router
我的组件中的一些功能打开或关闭取决于浏览器大小因此我想检查调整大小事件上的浏览器宽度,但我可以使用On Init方法,但我需要刷新浏览器调整大小时发生更新浏览器宽度
ngOnInit() {
if (window.innerWidth <= 767){
---- do something
}
}
但是我试图使用OnChanges方法,但它也不起作用
OnChanges(changes:SimpleChanges){
console.log( 'width:====>' + changes[window.innerWidth].currentValue);
if ( changes[window.innerWidth].currentValue <= 767 ){
---- do something
}
}
有任何建议或替代方法来实现这一目标吗？
我试图通过写一些字段来检查我的表单是否正在编辑.我读过$ dirty应该为这个任务工作,但我无法弄清楚我在这里缺少什么:
<!DOCTYPE html>
<html lang="en">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form name = "myForm" novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p> is Form dirty? {{isDirty}}<p>
<p>form = {{user }}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName:"John", lastName:"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
$scope.isDirty = $scope.myForm.$dirty;
});
</script>
</body>
</html>
我试图在用户修改表单时将标志isDirty设为true.谢谢
我正在尝试在单击链接时加载HTML模板.我做了一个包含templateUrl加载HTML文件的指令.我在单击一个链接时调用一个函数,该链接将带有我们的自定义指令"myCustomer"的div附加到已经在index.html中的div.到目前为止我所做的一切如下所示,但它不起作用.
的index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example12-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
<a href="#" ng-click="showdiv()">show</a>
<div id="d"></div>
</div>
</body>
</html>
的script.js
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.showdiv = function(){
$("#d").append("<div my-Customer></div>");
};
}])
.directive('myCustomer', function() {
return {
templateUrl: 'my-customer.html'
};
});
})(window.angular);
我-customer.html
<p>DIV CONTENT</p>
这是我在这里测试此代码的链接
我的页面上有一个按钮,页面上有一个id ="viewQuestions":
<body ng-keydown="key($event);">
我的代码正在检查这样的关键命中:
$scope.key = function ($event) {
$scope.$broadcast('key', $event.keyCode)
}
并在控制器中:
$scope.$on('key', function (e, key) {
if (key == 13) {
if (ts.test.current && ts.test.userTestId) {
document.getElementById("viewQuestions").click();
}
}
});
当我运行代码并单击ENTER然后我收到此错误:
Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.3.7/$rootScope/inprog?p0=%24apply
at REGEX_STRING_REGEXP (http://localhost:2757/lib/angular/angular.js:63:12)
at beginPhase (http://localhost:2757/lib/angular/angular.js:14735:15)
at Scope.$get.Scope.$apply (http://localhost:2757/lib/angular/angular.js:14479:11)
at HTMLButtonElement.<anonymous> (http://localhost:2757/lib/angular/angular.js:22945:23)
at HTMLButtonElement.eventHandler (http://localhost:2757/lib/angular/angular.js:3009:21)
at http://localhost:2757/app/tests/controllers/TestsController.js:24:62
at Scope.$get.Scope.$broadcast (http://localhost:2757/lib/angular/angular.js:14700:28)
at Scope.AppController.$scope.key (http://localhost:2757/app/appController.js:30:20)
at $parseFunctionCall (http://localhost:2757/lib/angular/angular.js:12330:18)
at ngEventDirectives.(anonymous function).compile.element.on.callback (http://localhost:2757/lib/angular/angular.js:22940:17)
任何人都可以给我这方面的建议.我只想在按下ENTER键时模拟按钮的单击.我确实尝试过使用表单的解决方案,但它不符合我相当复杂的需求.
我想指定一个javascript函数来ng-click哪个名字来自休息服务.
<li ng-class="{ active: isActive('url')}" data-ng-repeat="menu in mb.data">
<a href="{{menu.href}}" data-ng-click="{{menu.javascript}}">{{menu.label}}</a>
</li>
遗憾的是,如果在ng-click中使用{{}},angularjs解析器会抛出异常.所以我尝试了几种解决方法,比如使用回调函数
<a href="{{menu.href}}" data-ng-click="call(menu.javascript)">{{menu.label}}</a>
但我的想法都没有成功.如何在ng-lick中指定javascript函数名？顺便说一句.函数本身是$ scope的一部分.
编辑 - 这是控制器:
"$ menu"服务只是一个get rest请求.请求结果是一个json对象,只保存字符串值.在当前问题中,menu.javascript的结果是"loginModal()".
.controller('HeaderController', function($scope, $http, ModalService, $menu, $routeParams) {
$scope.loginModal = function() {
console.log("modal", ModalService);
// Just provide a template url, a controller and call 'showModal'.
ModalService.showModal({
templateUrl: "/modals/login.modal.html",
controller: "LoginController"
}).then(function(modal) {
// The modal object has the element built, if this is a bootstrap modal
// you can call 'modal' to show it, if it's a …html javascript angularjs angularjs-scope angularjs-ng-click
我目前正在通过创建一个简单的播客应用程序来学习AngularJS和Ionic.我试图使用routeParams来获取"itemId"但我收到以下错误:
Error: [$injector:unpr] Unknown provider: $routeParamsProvider <- $routeParams <- DetailsController
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24routeParamsProvider%20%3C-%20%24routeParams%20%3C-%20DetailsController
minErr/现在这是我传递"itemId"的方式
.state('ted', {
url: '/ted/:itemId',
templateUrl: 'templates/ted-talks.html',
controller: 'DetailsController'
})这是我的控制器:
starter.controller("DetailsController", ["$scope", "$routeParams", "$http", function ($scope, $routeParams, $http) {
$http.get('http://api.npr.org/query?id=57&apiKey={I've taken the ID off})
.success(function(data, status, headers, config){
var x2js = new X2JS();
var jsonOutput = x2js.xml_str2json(data);
console.log(jsonOutput);
$scope.stories = jsonOutput.nprml.list.story;
if($routeParams.itemId) {
console.log('Single page id' + $routeParams.itemId);
}
})
.error(function(data, status, headers, config){
alert('There is a problem');
})
}]);是什么原因导致这个错误？我相信routeParams已经包含在离子框架中,因为它们提供的演示似乎有效,我无法弄清楚如何.
任何帮助都很受欢迎:)
javascript routing angularjs angularjs-routing angular-ui-router
我正在尝试将回调函数从控制器传递给指令.
这是回调函数代码:
$scope.onImageSelect = function(image) {
alert('SET');
$scope.card.image = image;
};
指令用法:
<google-image-search callback="onImageSelect" />
指令代码:
ngmod.directive('directive', function() {
return {
templateUrl: '/templates/template.html',
scope: {
callback: '&'
}
}
});
模板中的回调用法:
<a data-ng-click="callback(url)"></a>
但是,这给了我以下错误:
TypeError: Cannot use 'in' operator to search for 'onImageSelect'
我见过很多类似的问题,但无法理解我错在哪里.
javascript google-image-search angularjs angularjs-directive angularjs-ng-click
我正在尝试在多个位置和多个控制器中使用cookie值,但我得到错误,说$ rootScope没有定义
这是代码:
capApp.controller('cookieCtrl', ['$scope','$cookies', function($scope, $rootScope, $cookies) {
// set variable for nav
$rootScope.cookieSet = $cookies.user_id;
}]);
capApp.controller('mainController', function($scope, $location) {
$scope.user_id = $rootScope.cookieSet; // set global var
});有一个更好的方法吗？基本上我希望网站范围内的cookie值可用
我在这里有脚本,ng-pattern工作正常,因为只有输入匹配模式后,才会在输出中显示scope.subnet.但是如果ng-pattern不匹配,ng-show不会显示任何错误
<body ng-contoller="myConfigGenCtr">
<form novalidate name="myForm">
<div class="form-group">
<label for="hostname">Firewall hostname</label>
<input type="text" ng-model="hostname" class="form-control" id="hostname">
</div>
<div class="form-group">
<label for="subnet">Firewall subnet</label>
<input type="text" ng-model="subnet" class="form-control" id="subnet"
required ng-pattern="/^(?:[0-9]{1,3}\.){3}/" >
<div class="custom-error" ng-show="myForm.subnet.$error.pattern">
Not a valid subnet, should be i.e. 10.x.y. (3 bytes only)</div>
</div>
</form>
<div>Output: {{subnet}}</div>
</body>
angularjs ×9
javascript ×8
events ×2
forms ×2
html ×2
routing ×2
angular ×1
cookies ×1
form-editing ×1
jquery ×1
validation ×1