我有两个Angular控制器:
function Ctrl1($scope) {
$scope.prop1 = "First";
}
function Ctrl2($scope) {
$scope.prop2 = "Second";
$scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}
我不能Ctrl1在里面使用,Ctrl2因为它是未定义的.但是,如果我尝试传递它...
function Ctrl2($scope, Ctrl1) {
$scope.prop2 = "Second";
$scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}
我收到一个错误.有谁知道如何做到这一点？
干
Ctrl2.prototype = new Ctrl1();
也失败了.
注意:这些控制器不是彼此嵌套的.
如何使用$rootScope我想稍后在另一个控制器中访问的控制器中存储变量？例如:
angular.module('myApp').controller('myCtrl', function($scope) {
var a = //something in the scope
//put it in the root scope
});
angular.module('myApp').controller('myCtrl2', function($scope) {
var b = //get var a from root scope somehow
//use var b
});
我该怎么做？
在模块中,控制器可以从外部控制器继承属性:
var app = angular.module('angularjs-starter', []);
var ParentCtrl = function ($scope, $location) {
};
app.controller('ChildCtrl', function($scope, $injector) {
$injector.invoke(ParentCtrl, this, {$scope: $scope});
});
示例:死链接:http://blog.omkarpatil.com/2013/02/controller-inheritance-in-angularjs.html
模块内的控制器也可以继承兄弟姐妹吗？
var app = angular.module('angularjs-starter', []);
app.controller('ParentCtrl ', function($scope) {
//I'm the sibling, but want to act as parent
});
app.controller('ChildCtrl', function($scope, $injector) {
$injector.invoke(ParentCtrl, this, {$scope: $scope}); //This does not work
});
第二个代码不起作用,因为$injector.invoke需要一个函数作为第一个参数,并且找不到引用ParentCtrl.
我正在寻找如何绑定到AngularJS中的服务属性的最佳实践.
我已经通过多个示例来了解如何绑定到使用AngularJS创建的服务中的属性.
下面我有两个如何绑定到服务中的属性的示例; 他们都工作.第一个示例使用基本绑定,第二个示例使用$ scope.$ watch绑定到服务属性
在绑定到服务中的属性时,这些示例中的任何一个都是首选的,还是有其他我不知道的选项会被推荐？
这些示例的前提是服务应每5秒更新其属性"lastUpdated"和"calls".更新服务属性后,视图应反映这些更改.这两个例子都成功地运作了 我想知道是否有更好的方法.
基本绑定
可以在此处查看和运行以下代码:http://plnkr.co/edit/d3c16z
<html>
<body ng-app="ServiceNotification" >
<div ng-controller="TimerCtrl1" style="border-style:dotted">
TimerCtrl1 <br/>
Last Updated: {{timerData.lastUpdated}}<br/>
Last Updated: {{timerData.calls}}<br/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module("ServiceNotification", []);
function TimerCtrl1($scope, Timer) {
$scope.timerData = Timer.data;
};
app.factory("Timer", function ($timeout) {
var data = { lastUpdated: new Date(), calls: 0 };
var updateTimer = function () {
data.lastUpdated = new Date();
data.calls += 1;
console.log("updateTimer: " + data.lastUpdated);
$timeout(updateTimer, 5000); …data-binding angularjs angularjs-service angularjs-controller
我是Angular的新手并试图找出如何做事......
使用AngularJS,如何注入要在另一个控制器中使用的控制器？
我有以下代码段:
var app = angular.module("testApp", ['']);
app.controller('TestCtrl1', ['$scope', function ($scope) {
$scope.myMethod = function () {
console.log("TestCtrl1 - myMethod");
}
}]);
app.controller('TestCtrl2', ['$scope', 'TestCtrl1', function ($scope, TestCtrl1) {
TestCtrl1.myMethod();
}]);
当我执行此操作时,我收到错误:
Error: [$injector:unpr] Unknown provider: TestCtrl1Provider <- TestCtrl1
http://errors.angularjs.org/1.2.21/$injector/unpr?p0=TestCtrl1Provider%20%3C-%20TestCtrl1
我是否应该尝试在另一个控制器内使用控制器,还是应该将其作为服务？
我正在尝试对文件更改进行一些验证.这是我的代码:
查看/模板
<input type="file" name="file" id="file"
onchange="angular.element(this).scope().setFile(this)"
required />
<span class="error" ng-show="myForm.file.$error.required">Error</span>
<span class="error" ng-show="myForm.file.$error.size">Selected file is too large</span>
<span class="error" ng-show="myForm.file.$error.filetype">Unsupported File type</span>
调节器
angular.module("myapp").controller("myctrl", function($scope) {
$scope.setFile = function(element) {
$scope.$apply(function($scope) {
var fileObject = element.files[0];
$scope.file.fileType =
fileObject.type.toUpperCase().substring(fileObject.type.indexOf("/") + 1);
// Validation
if (!$scope.isValidFileType($scope.file.fileType)) {
myForm.file.$setValidity("myForm.file.$error.filetype", false);
}
if (fileObject.size > 1000*1000*10) {
myForm.file.$setValidity("myForm.file.$error.size", false);
}
});
};
$scope.isValidFileType = function(fileExtension) {
var supportedExtensions = ["doc", "docx", "ppt", "pptx", "jpg", "gif", "png"]; // etc.
return (jQuery.inArray(fileExtension, supportedExtensions) …这是一个很长的镜头,但有没有人见过这个错误？我试图使用express,angular和mongoDB添加'Transporters'.每当我访问由传输器控制器管理的页面时,我都会收到此错误:
Error: [ng:areq] http://errors.angularjs.org/1.2.12/ng/areq?p0=TransportersController&p1=not%20aNaNunction%2C%20got%20undefined
at Error (native)
at http://localhost:3000/lib/angular/angular.min.js:6:450
at tb (http://localhost:3000/lib/angular/angular.min.js:18:360)
at Pa (http://localhost:3000/lib/angular/angular.min.js:18:447)
at http://localhost:3000/lib/angular/angular.min.js:62:17
at http://localhost:3000/lib/angular/angular.min.js:49:43
at q (http://localhost:3000/lib/angular/angular.min.js:7:386)
at H (http://localhost:3000/lib/angular/angular.min.js:48:406)
at f (http://localhost:3000/lib/angular/angular.min.js:42:399)
at http://localhost:3000/lib/angular/angular.min.js:42:67
传输器控制器如下所示:
'use strict';
angular.module('mean.transporters').controller('TransportersController', ['$scope', '$routeParams', '$location', 'Global', 'Transporters', function ($scope, $routeParams, $location, Global, Transporters) {
$scope.global = Global;
$scope.create = function() {
var transporter = new Transporters({
name: this.name,
natl_id: this.natl_id,
phone: this.phone
});
transporter.$save(function(response) {
$location.path('transporters/' + response._id);
});
this.title = '';
this.content = '';
};
$scope.remove = …目前我正在使用forEach()angular 的-method来检查对象数组的新值.但这是错误的方法,因为例如在列表中有20个对象.当我用现有文章创建一个对象时,forEach中的if语句告诉一次该文章存在,而19次则不存在.
以下代码:
var list = [];
articlelist.forEach(function (val) {
list.push(val.artNr);
});
$log.info(list);
在articlelist包含所有20个对象.为了比较我只需要artNr.因为当用户创建新文章时,应该是if-Statement来检查添加的artNr是否已经存在.
$scope.createItem = function (createItem) {
if(list.artNr === createItem.artNr) {
$scope.message = 'artNr already exists!';
}
...
};
问题是,list.artNr返回"undefined",因为list变量是一个数组:
在console =>中列出输出
Array ["AB001", "AB002", "AB003", "AB004"],createItem output:=>
Object { artNr: "AB001", description: "New Article" ...}
如何将新创建的对象与列表变量中的数组进行比较？
使用原始方式定义控制器,访问父级的范围相当简单,因为子范围原型继承自其父级.
app.controller("parentCtrl", function($scope){
$scope.name = "Parent";
})
.controller("childCtrl", function($scope){
$scope.childName = "child of " + $scope.name;
});
<div ng-controller="parentCtrl">
{{name}}
<div ng-controller="childCtrl">
{{childName}}
</div>
</div>
Controller-As方法似乎是声明控制器的推荐方法.但是使用Controller-As,上述方法不再适用.
当然,我可以pc.name从View中访问父作用域:
<div ng-controller="parentCtrl as pc">
{{pc.name}}
<div ng-controller="childCtrl as cc">
{{cc.childName}}
</div>
</div>
我确实遇到了一些问题(潜在的意大利面条代码),但这个问题是关于从子控制器访问父作用域.
我能看到这个工作的唯一方法是:
app.controller("parentCtrl", function(){
this.name = "parent";
})
.controller("childCtrl", function($scope){
$scope.pc.name = "child of " + $scope.name;
// or
$scope.$parent.pc.name = "child of " + $scope.name;
// there's no $scope.name
// and no $scope.$parent.name
}); …我想我错过了什么,但无法弄清楚是什么.
基本上我正试图将一个对象传递给下面的模态,但是我没有得到传递的对象,而是获得null ...所以我认为是范围的问题,但我是Angular中的新手,需要一些帮助.
调节器
app.controller("musicViewModel", function ($scope, $http, $location, $uibModal, $log) {
$scope.selected = null;
$scope.open = function (item) {
$scope.selected = item;
$log.info('Open' + $scope.selected); // get right passes object
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: 'musicViewModel',
size: 'lg',
resolve: {
items: function () {
return $scope.selected;
}
}
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
视图
<div class="row" ng-controller="musicViewModel">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul> …twitter-bootstrap angularjs angular-ui angularjs-controller bootstrap-modal
angularjs ×10
javascript ×4
angular-ui ×1
arrays ×1
data-binding ×1
inheritance ×1
mean-stack ×1
object ×1
rootscope ×1