是否可以以某种方式定义角度，我不想在ng-repeat范围内重复一些 html 标签。例如，我想创建一个像这样的选项卡过滤器：
<div class="searchandfilter" ng-app="phonecatApp">
<span ng-controller="PhoneListCtrl">
<span ng-repeat="phone in phones" class="tab-controller">
<ul>
<li class="tab" >{{phone.name}}</li>
</ul>
<span class="tab-content dont-repeat">
<span>
<input type="checkbox">{{phone.brand}}</input>
</span>
</span>
</span>
</span>
</div>
我不想在 class 中重复 span dont-repeat，但span在inputinside 中我需要重复。
我想将第三方api(uploadcare)编译成指令.
api将在async上传后返回数据信息,然后我想对我的控制器中的返回数据做一些事情,但我不得不知道如何将返回数据从指令传递给控制器.以下是我的代码.
在js
link: function (scope, element, attrs) {
//var fileEl = document.getElementById('testing');
var a = function() {
var file = uploadcare.fileFrom('event', {target: fileEl});
file.done(function(fileInfo) {
//scope.$apply(attrs.directUpload)
//HERE IS MY PROBLEM.
//How can I get the fileInfo then pass and run it at attrs.directUpload
}).fail(function(error, fileInfo) {
}).progress(function(uploadInfo) {
//Show progress bar then update to node
console.log(uploadInfo);
});
};
element.bind('change', function() {a()});
}
在HTML中
<input type="file" direct-upload="doSomething()">
在控制器中
$scope.doSomething = function() {alert(fileInfo)};
angularjs angularjs-directive angularjs-controller uploadcare
我正在尝试使用angular创建一个菜单.菜单项可以让孩子需要另外的ng-repeat来打印子导航项.当我尝试在第二个ng-repeat中插入一个锚标签时,我注意到了一些奇怪的行为.
链接到小提琴:http://jsfiddle.net/npU7t/
<li ng-repeat="sub_menu_item in menu_item.sub_menu">
<a href="">
{{ sub_menu_item.title }}
</a>
</li>
同
{
title: 'menu item with children',
sub_menu: [
{
title: '<-- empty anchor tag???'
}
]
}
结果是
<li ng-repeat="sub_menu_item in menu_item.sub_menu" class="ng-scope">
<a href=""></a>
<a href="" class="ng-binding"><-- empty anchor tag???</a>
</li>
复制/空锚标记来自何处？如何防止它被创建？
感谢帮助!
angularjs angularjs-directive angularjs-ng-repeat angularjs-controller
遵循MVC模式,一个控制器应该能够处理AngularJS中的多个视图.
例如,我有一个用于显示所有用户的视图和一个用于创建新用户的视图.我的 $routeProvider(摘录)看起来像这样:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/showusers', {
templateUrl: 'partials/showusers.html',
controller: 'userController'
}).
when('/createuser', {
templateUrl: 'partials/showusers.html',
controller: 'userController'
})
}]);
两个视图共享多种方法,例如检索所有用户属性.这些共享方法可通过以下方式访问factory.
该userController(节选)目前看起来是这样的地方Users是一个工厂:
angular.module('supportModule').
controller('userController', function($scope, Users) {
var init = function(){
$scope.users = Users.getAll();
$scope.attributes = Users.getAttributes();
}
init();
})
问题是:Users.getAll();当我在createuser视图上时,我不需要请求.
当然,我可以通过使用$location,$routeProvider纯粹的JS然后条件调用方法来轻松地解析路径- 但我认为在Angular中有一种更优雅和有效的方式:)
类似于典型的MVC框架,其中一个控制器有许多动作 -每个视图一个.
所以我的问题:
如何在控制多个视图的控制器中优雅地调用基于视图的方法？
我有3个执行类似任务的控制器：
它们每个都是唯一的（尽管它们具有相似的功能）。但是，它们都从定义相同的$scope变量开始：
app.controller("PastController", function ($scope) {
$scope.Outages = "";
$scope.loading = 0;
$scope.nothing = 0;
$scope.error = 0;
//--- code continues ---//
});
app.controller("CurrentController", function ($scope) {
$scope.Outages = "";
$scope.loading = 0;
$scope.nothing = 0;
$scope.error = 0;
//--- code continues ---//
});
app.controller("FutureController", function ($scope) {
$scope.Outages = "";
$scope.loading = 0;
$scope.nothing = 0;
$scope.error = 0;
//--- code continues ---//
});
我可以使用服务或工厂在一个地方初始化这些变量，而不用重复代码吗？
我尝试将$ http.get中的数据分配给我的控制器中的变量.
$http.get(URL).success(function (data) {
$scope.results = data;
console.log('results in $http.get :'+ $scope.results);
});
console.log('results after http.get'+ $scope.results);
第一个控制台日志打印数据来自get.在$ http.get(url).success $ scope.results打印为undefined之后.
javascript angularjs angularjs-scope angularjs-controller angularjs-http
我不明白这两种angularjs控制器定义之间的区别,我尝试了下面的代码,发现两者都有效
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
在app.js我有:
(function(){
var app = angular.module("myApp", []);
})();
在我拥有之后process.js 包括: app.js
(function(){
app.controller('ProcessController', ['$http', function($http){
this.something = "Test"
}]);
});
在我的HTML档案中,我有一个div
<html class="no-js" lang="en" ng-app="myApp">
...
<div class="row" ng-controller="ProcessController">
这在我的控制台中引发错误:
Error: [ng:areq] Argument 'ProcessController' is not a function, got undefined
我对角度很新,从来没有使用过像这样的多个文件.我究竟做错了什么？
我有一个带有单选按钮的简单表单,它从服务器中提取值并循环遍历它们以提供单选按钮:
<form ng-submit="createSubCategory(subcategory)">
<div ng-repeat="sub_category in event_sub_categories" >
<label class="item item-radio">
<input type="radio" ng-model="subcategory" ng-value="'{{sub_category}}'" >
<div class="radio-content">
<div class="item-content">
{{sub_category}}
</div>
<i class="radio-icon ion-checkmark"></i>
</div>
</label>
</div>
<div class="padding">
<button type="submit" class="button button-block button-positive">Continue</button>
</div>
</form>
表格完美显示.但是,我按下的单选按钮似乎没有保存.这是createSubCategory方法:
$scope.createSubCategory = function(subcategory){
console.log(subcategory);
}
日志正在显示undefined.填写表格后如何记录子类别？
angularjs angularjs-controller angular-ngmodel ng-submit angularjs-ng-model
我试图在AngularJS(1.6.9)中模拟Controller继承,但我在控制台上收到错误:Function.prototype.bind.apply(...)不是构造函数
这是HTML文件:
<!-- Controller Inheritance -->
<!DOCTYPE html>
<html lang="en" ng-app="app7">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Tutorial 7</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-controller="mainCtrl as parent">
<p>Name: {{parent.name}}</p>
<p>Sound: {{parent.sound}}</p>
<button ng-click="parent.animalClick()">Animal Data</button>
</div>
<br><br>
<div ng-controller="dogCtrl as dog">
<p>Name: {{dog.child.name}}</p>
<p>Sound: {{dog.child.sound}}</p>
<button ng-click="dog.child.animalClick()">Dog Data</button>
<button ng-click="dog.child.dogData()">Get More Data</button>
</div>
<script src="js/exam7.js"></script>
</body>
</html>
这是JS文件:
//Controller Inheritance Demonstration
let app7 = angular.module('app7',[]);
//Parent Controller
app7.controller('mainCtrl',()=>{
this.name="Animal";
this.sound="Silent";
this.animalClick= ()=>{
alert(this.name+' says '+this.sound);
}; …javascript inheritance prototype angularjs angularjs-controller