我想知道什么是在控制器之间共享指令的好方法.我有两个指令在不同的控制器中使用不同的配置,我认为使用的第一个想法:
//html
<body data-ng-controller="MainCtrl">
<div class="container">
<div data-ui-view></div>
</div>
</body>
//js
.controller('MainCtrl', function ($scope,$upload) {
/*File upload config*/
$scope.onFileSelect = function($files) {
for (var i = 0; i < $files.length; i++) {
var file = $files[i];
$scope.upload = $upload.upload({
url: 'server/upload/url',
method: 'POST',
data: {myObj: $scope.myModelObj},
file: file,
}).progress(function(evt) {
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data, status, headers, config) {
console.log(data);
});
}
};
/* Datepicker config */
$scope.showWeeks = true;
$scope.minDate = new Date();
$scope.open = …angularjs angular-ui angularjs-directive angularjs-scope angular-ui-bootstrap
这是我的代码 - http://plnkr.co/edit/oTWXbLIKOxoGTd4U0goD?p=preview
为什么日子dropdown没有数据绑定scope.demoDays,它总是空的？
这是dropdown动态添加的正确方法吗？如果用户添加5个下拉列表,如何获得结果,将 ng-model="selectedDay"创建一个选择数组？有什么建议？
谢谢
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $compile) {
var counter = 0;
$scope.fields = [];
$scope.days =['Day','Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
$scope.addField = function() {
$scope.fields.push({name:"test " + counter++});
};
});
app.directive('demoDisplay', function($compile){
return {
scope:{
demoDisplay:"=", //import referenced model to our directives scope
demoDays:"="
},
link:function (scope, elem, attr, ctrl)
{
scope.$watch('demoDisplay', function(){ // watch for when model changes
elem.html("") //remove all elements
angular.forEach(scope.demoDisplay, function(d){ //iterate list
var …我已经创建了一个简单的小指令(绝不是完整的),以最简单的方式呈现日期选择器.绑定到范围属性时,可以通过单击某一天来更新该属性.到现在为止还挺好.当然,您需要能够查看其他月份.这是事情变得棘手的地方.当有人点击顶部日期旁边的"<"或">"时,我正在重新生成与模板绑定的HTML:属性.当我这样做时,我正在尝试$ compile,以便所有角度连接仍然按预期运行,但我遗漏了一些关于我的$ compile操作如何更改元素的内容.我用它来编译新的HTML:
element.replaceWith($compile(getCalHMTL(month, year))(scope));
这是有效的,一切都连接到第二次调用,但是当第二次调用(通过第二次点击'>'或'<')时,我收到以下错误消息:
Cannot read property 'replaceChild' of null
好像元素在link:property中为null.在这个例子中,我应该如何使用$ compile来完成这项工作？
<tr class="labels">
<td nowrap="nowrap">Address</td>
<td nowrap="nowrap"><label for="tbAddress"></label>
<textarea name="tbAddress" id="tbAddress" cols="39" rows="5" ng-model="$parent.tbAddress"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td align="right">
<input type="submit" name="button" id="button" value="Submit Record" class="btns" />
<input type="reset" name="button2" id="button2" value="Cancel" class="btns" />
</td>
</tr>
我无法textarea使用AngularJS 获得价值.所有input文本字段都通过控制器,除了textarea.我究竟做错了什么 ？
alert($scope.tbAddress);
var thisData = {
'name': $scope.tbFN,
'company': $scope.tbCompany,
'designation': $scope.tbDesignation,
'email': $scope.tbEmail,
'phone': $scope.tbPhone,
'mobile': $scope.tbMobile,
'address': $scope.tbAddress
};
这是警报未定义......
我是AngularJS的相对入门者，正在编写一个具有各种可重用组件的应用程序（例如，同一张表可能在屏幕上出现5次，但列数略有不同-如有必要，我可以详细介绍）。其他人也会想编写使用这些组件的代码。同样，多个组件将要从相同的来源中提取数据，并且多个人将要进行相同的REST调用以获取数据。
我想到的一般架构：
举一个简单的例子，一条指令将使用ng-repeat打印一个名称列表。服务将具有一个“公共”函数getNames（），该函数返回名称列表。我正在编写一个应用程序-我使用“ canned”指令和服务，我编写了一个将服务作为依赖项的控制器，调用getNames（）函数并将结果返回到指令。我的HTML页面像其他任何HTML元素一样简单地使用指令。
我的主要问题-将数据放入指令的最佳方法是什么？我知道就范围而言，有很多选择，但是必须在我的控件中创建一个具有特定名称的变量并“神奇地”工作似乎是错误的。
从广义上讲，这是否合理？我基本上将指令和服务视为开发人员将使用的公共API。
我正在用angularjs开发一个移动应用程序，在该应用程序中必须调用Web服务。但是，当我拨打电话时$http.get，出现以下错误。
XMLHttpRequest cannot load http://example.com/First_Step.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8020' is therefore not allowed access.
我的功能如下：
$scope.firstStepClick = function() {
appSvc.selectedItem = "firstStep";
$rootScope.go('parent/firststep', 'slideLeft');
delete $http.defaults.headers.common['X-Requested-With'];
$http.get("http://example.com/First_Step.json").success(function(data) {
$scope.firstStepData = data;
}).error(function() {
alert("an unexpected error occured");
});
};
因此，请帮助我解决此CORS问题。我正在为此移动应用程序开发使用html5，css3和angularjs。
提前致谢
xmlhttprequest same-origin-policy cors angularjs angularjs-directive
我试图通过指令更改控制器范围,但它不会更改.
当我通过指令更改模型时,goas将自动更改$scope.modulesin MyCtrl:
link: function (scope) {
scope.module.title += ' changed';
scope.module = {
title: 'Redeclared'
};
},
这段代码完美无缺
scope.module.title += ' changed';
但这不是: scope.module = { title: 'Redeclared' };
在$ http.get请求之后,我们有一个对象,{title: 'Redeclared'}这就是为什么我这样做scope.module = { title: 'Redeclared' };
知道怎么做吗？谢谢
javascript angularjs angularjs-directive angularjs-scope angularjs-ng-repeat
我想构建一个angular.js指令，通过单击<span>，它将变成可编辑的输入。并且以下代码运行良好，除了模型为空或模型长度为0时，请使其显示为<span> EMPTY </span>。
<span ng-editable="updateAccountProfile({'location':profile.location})" ng-editable-model="profile.location"></span>
app.directive('ngEditable', function() {
return {
template: '<span class="editable-wrapper">' + '<span data-ng-hide="edit" data-ng-click="edit=true;value=model;">{{model}}</span>' + '<input type="text" data-ng-model="value" data-ng-blur="edit = false; model = value" data-ng-show="edit" data-ng-enter="model=value;edit=false;"/>' + '</span>',
scope: {
model: '=ngEditableModel',
update: '&ngEditable'
},
replace: true,
link: function(scope, element, attrs) {
var value = scope.$eval(attrs.ngEditableModel);
console.log('value ' , attrs.ngEditableModel , value);
if (value == undefined || (value != undefined && value.length == 0)) {
console.log('none');
var placeHolder = $("<span>");
placeHolder.html("None");
placeHolder.addClass("label"); …我创建了一个指令,禁用所有选定的子元素,如下所示:
app.directive('noeDisable', function () {
var linkFunction = function (scope, element, attributes) {
scope.text = attributes["=noeDisable"];
if (scope.text == 'true') {
$(element).find('input,button,a').attr("disabled", true);
}
};
return {
link: linkFunction
};
});
它适用于这个例子:<div noe-disable="true"> ... </div>.但问题是稍后加载了一些子元素,例如在ajax调用之后或者我在父元素中有另一个angularjs指令将一些子元素添加到其父元素时,所以它们不会被禁用!我该如何处理这个问题？
我在下面有这个控制器.在页面加载时,执行下面看到的$ http服务.
现在,我如何从其他控制器调用并执行控制器的$ http.post(...)部分AGAIN.
controller: function ($scope, $element, $http) {
function par() {
var xxx= null;
xxx = $scope.$parent.$root.ParentItems['xxx'].xxx;
var det = { xxx: xxx};
return det;
}
$http.post('/api/values/entries/GoHere', par()).success(function (salData) {
var buildSHGraph = function (shData) {
//code code codes...
}
$scope.Array1 = [];
angular.forEach(salData, function (evt) {
//Code Code Codes
});
buildSHGraph($scope.Array1);
});
}
javascript jquery angularjs angularjs-directive angularjs-scope