我已尝试在我的控制器中执行以下操作:
$scope.$on("$routeChangeStart", function (event, next, current) {
if (!confirm('are you sure ?')) {
event.preventDefault();
}
});
但它不起作用.那不应该是这样做的吗？
我创建了一个简单的Angular JS $ routeProvider解析测试应用程序.它给出以下错误:
Error: Unknown provider: dataProvider <- data
如果有人能够确定我哪里出错了,我将不胜感激.
的index.html
<!DOCTYPE html>
<html ng-app="ResolveTest">
<head>
<title>Resolve Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"> </script>
<script src="ResolveTest.js"></script>
</head>
<body ng-controller="ResolveCtrl">
<div ng-view></div>
</body>
</html>
ResolveTest.js
var rt = angular.module("ResolveTest",[]);
rt.config(["$routeProvider",function($routeProvider)
{
$routeProvider.when("/",{
templateUrl: "rt.html",
controller: "ResolveCtrl",
resolve: {
data: ["$q","$timeout",function($q,$timeout)
{
var deferred = $q.defer();
$timeout(function()
{
deferred.resolve("my data value");
},2000);
return deferred.promise;
}]
}
});
}]);
rt.controller("ResolveCtrl",["$scope","data",function($scope,data)
{
console.log("data : " + data);
$scope.data = data;
}]);
rt.html
<span>{{data}}</span>
angularjs angularjs-directive angularjs-service angularjs-routing angularjs-controller
这两个都有效,但每个实现之间的实际差异是什么？我确信每种方法背后都有合理的推理,我希望能够开悟.
angular.module('app').controller('GeneralCtrl',
function($scope, $location, exampleService) {
$scope.variable = exampleService.getExampleVariable();
}
);
angular.module('app').controller('GeneralCtrl',
['$scope', '$location', 'exampleService', function($scope, $location, exampleService) {
$scope.variable = exampleService.getExampleVariable();
}]
);
这些之间的实际区别是什么？你会用不同的方式使用它们？为什么？
答:当minifiers重命名参数名称时,后者是minification安全的,因此无法从名称中推断出依赖关系,因此必须进行注释.
我正在尝试编写自己的AngularJS指令.我想我理解compile和link功能之间的区别.这段视频很好地清除了它.
但我现在不确定我是否理解控制器在指令中扮演的角色.一个指令可以包括一个controller功能,你可以注入$element,$attrs而这种进入,所以它可以做几乎所有的link周围的功能可以做到,我相信,其他的方式.
所以我有两个问题:
controller功能和link功能之间是否存在重要的技术差异？自解释小提琴:http://jsfiddle.net/5FG2n/1/
假设我有两个控制器的视图,一个包含另一个.外部控制器是静态的,但我需要根据外部的范围变量设置内部控制器.范围变量将是内部控制器的名称作为字符串(例如'InnerCtrl').
这是观点:
<div ng-app='app' ng-controller='OuterCtrl'>
<div ng-controller='dynamicCtrl'>
{{result}}
</div>
</div>
这是不正确的模块:
angular.module('app', [])
.controller('OuterCtrl', ['$scope',
function($scope) {
// Instead of hard coding the controller here,
// how do I resolve the string 'InnerCtrl' to the
// controller function defined below, so it can be
// assigned to this dynamicCtrl property?
$scope.dynamicCtrl = function($scope) {
$scope.result = 'not working yet';
};
//eg:
//$scope.dynamicCtrl = resolveCtrl('InnerCtrl');
}
])
.controller('InnerCtrl', ['$scope', 'service',
function($scope, service) {
$scope.result = …在阅读下面的帖子并在角度js上工作一段时间后,我有一个简单的问题.
关注点(来自帖子):不要使用控制器来
操纵DOM - 控制器应该只包含业务逻辑.将任何表示逻辑放入控制器会显着影响其可测试性.Angular对大多数情况和指令进行数据绑定以封装手动DOM操作.
问题:如果我有一个简单的角度应用程序和按钮单击我调用我的控制器的功能.在该函数中,我想做一些简单的业务逻辑,并根据业务逻辑输出我想隐藏/显示一个按钮.
什么是最好的方法.
我目前这样做的方法是:PLUNKER EXAMPLE (这种做事的方式是否违反了角度js领域的规律.是否反对测试？请纠正我)
说我有以下控制器:
controller("MyCtrl1", ["$scope", "$sce", "myService", "$location",
function ($scope, $sce, myService, $location) {
$scope.Resources = window.MyGlobalResorcesObject;
$scope.trustedHtml = function (input) {
return $sce.trustAsHtml(input);
};
$scope.startProcessing = function () {
$scope.processingRequest = true;
};
$scope.endProcessing = function () {
$scope.processingRequest = false;
$scope.$apply();
};
//some MyCtrl1-specific code goes here
}]).
controller("MyCtrl2", ["$scope", "$sce", "myService", "$location",
function ($scope, $sce, myService, $location) {
$scope.Resources = window.MyGlobalResorcesObject;
$scope.trustedHtml = function (input) {
return $sce.trustAsHtml(input);
};
$scope.startProcessing = function () {
$scope.processingRequest = true;
};
$scope.endProcessing …我试图隐藏/显示基于Controller布尔变量的表单的一部分.这是我的HTML代码:
<div id="sheetform-container" ng-controller="SheetController as SheetCtrl">
<form action="#">
<div class="sheetform-row" ng-show="canShow('Price')">
<div class="sheetform-left-col fl-left"><label for="sheetform-price">Price</label></div>
<div class="sheetform-midlle-col fl-left"><input type="text" class="sheetform-input" id="sheetform-price" name="price" value="$ 0.00" /></div>
<div class="sheetform-right-col fl-right"></div>
</div>
</form>
</div>
我创建了一个函数,根据发送的值将Price属性更改为true/false,称为setConfig.这是Controller代码的样子:
ngApp.controller('SheetController', ['$scope', function($scope) {
$scope.Price = true;
$scope.canShow = function(field) {
return $scope.Price;
}
$scope.setConfig = function(config) {
$scope.Price = config.Price;
}
}]);
知道我错过了什么吗？
谢谢!
我是Angular的新手,我正在浏览Angular网站的Angular视频简介.我的代码不起作用,我不知道为什么不行.我收到了错误
Error: ng:areq
Bad Argument
Argument 'MainController' is not a function, got undefined
这是我的代码.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular Demo</title>
</head>
<body>
<main ng-controller="MainController">
<p>{{message}}</p>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
function MainController($scope) {
$scope.message = "Controller Example";
}
</script>
</body>
</html>
我究竟做错了什么？
html javascript angularjs angularjs-controller angularjs-module
我正在尝试按照角度的样式指南,写道我们应该使用thisinsted scope...
当我能够使用时,有人能解释我this吗？
这是我的尝试.....我做错了什么？
我正在尝试切换表格....这是我的HTML代码:
<a href="#" ng-click="formEdit(x)" ng-if="!x.formEditShow">REPLY</a>
<a href="#" ng-click="formEdit(x)" ng-if="x.formEditShow" >CLOSE</a>
使用经典$scope我会在我的控制器中这样做:
$scope.formEdit = function(data){
data.formEditShow = !data.formEditShow;
}
但this它应该看起来像这样(但不起作用):
var vm = this;
vm.formEdit = formEdit;
function formEdit(data){
data.formEditShow = !data.formEditShow;
}
有人可以帮我理解这个吗？
javascript angularjs angularjs-scope angularjs-controller angularjs-controlleras