I'm carrying a $ ionicPopup with a variable that I get from my webservice. The problem that I have is not as filling into a variable. I leave my code:
if(data.Count > 0){
$scope.areas = data.Area;
var contentHtml = '<ul ng-repeat="area in data.Area"><li>{{area.name}}</li></ul>';
$ionicPopup.show({
title: 'Areas disponibles',
subTitle: '',
content: contentHtml,
scope: $scope,
buttons: [{
text: 'Salir',
onTap: function(e) {
}
}]
})
}
This obviously does not work and I'm looking to be able to load that variable in the ng-repeat, if someone could help me appreciate it.
In your HTML you can only use scoped var (ie : $scope.data mean that data is scoped).
data.Area isn't accessible into your html.
Doing this :
$scope.areas = data.Area;
You make it accessible as "areas" in your html.
Using ng-repeat like this :
ng-repeat="area in areas"
Will do the trick.
Related
I have the following columnDefs for my angularjs ui grid :
ctrl.temporaryRegGridOptions.columnDefs = [ {
field: 'firstName',
'displayName': 'First / Company Name',
cellTemplate: '<span ng-click="ctrl.grid.appScope.gotoRequiredState()">{{row.entity.firstName}} </span> '
}, {
field: 'lastName',
'displayName': 'Surname',
width: '150'
} ]
and I have
ctrl.gotoRequiredState = function() {
alert("next State");
}
All I need to do is, on ng-click of a cell I need to call a function.Similar to ClicMe at http://ui-grid.info/docs/#/tutorial/305_appScope. On the official website this feature is given with $scope but in my controller, I am using var ctrl = this; syntax. May be that is the reason even if I have given ng-click="grid.appScope.gotoRequiredState()">, the gotoRequiredState() function is not getting called. So I have changed it to ng-click="ctrl.grid.appScope.gotoRequiredState()"> but still no luck. Even after I click firstName cell, the gotoRequiredState() function is not getting called. Can any one help me to fix this.
The following has solved the problem :
ctrl.temporaryRegGridOptions.appScopeProvider = ctrl;
with
cellTemplate: '<span ng-click="grid.appScope.gotoRequiredState()">{{row.entity.firstName}} </span> '
works fine.
otherwise simply using :
cellTemplate: '<span ng-click="grid.appScope.$parent.$ctrl.gotoRequiredState()">{{row.entity.firstName}} </span> '
works fine without assigning ctrl to appScopeProvider. By the way I am using Angularjs 1.5 + components architecture.
From the documentation that you have shared, I presume that appScope is the parent scope of the grid directive.
If thats the case, could you try
ng-click="grid.appScope.ctrl.gotoRequiredState()" ?
I am trying to dynamically generate a form using an array that contains a bunch of directive names
$scope.components = ["textbox", "textbox", "radio", "checkbox", "label"];
I want to generate tags with these names using angular. For example
<textbox></textbox>
<textbox></textbox>
<radio></radio>
<checkbox></checkbox>
<label></label>
<--THE FOLLOWING DOESN'T WORK BUT WOULD BE COOL IF IT DID-->
<{{component}} ng-repeat="component in components track by $index"></{{component}}>
Right now as an alternative I do the following
<div ng-include="component + '.html'" ng-repeat="component in components track by $index"></div>
Which basically does what the directive would do with the templateUrl parameter. Should I
make a directive that generates tags
continue using ng-include as I am
use another method
You can't generate tag of elements dynamically using only angular expressions. However you can create a custom directive to do that work for you.
Proof of concept: (Demo: inspect DOM tree to see generated elements)
angular.module('MyModule').directive('dynamicTag', function($compile) {
return {
restrict: 'E',
scope: {
components: '&components'
},
link: function($scope, $element) {
var components = angular.isFunction($scope.components) ? $scope.components() : [];
var domElements = [];
angular.forEach(components, function(c) {
var domElement = document.createElement(c);
$compile(domElement)($scope);
domElements.push(domElement);
});
$element.replaceWith(domElements);
}
};
});
HTML
<dynamic-tag components="components"></dynamic-tag>
being components an array of strings in the scope as in your question:
$scope.components = ['textbox', 'radio', 'checkbox', 'label'];
I am using AngularJS Modal Service. http://fundoo-solutions.github.io/angularjs-modal-service/
I setup it in a simple way
Button to open a Model
<div data-ng-controller="contest as vm">
<a class="btn btn-primary" data-ng-click="vm.createFileUploadDialog()">Upload Image</a>
</div>
Inisde Controller I have a function defined createFileUploadDialog and expose it from my viewModel.
vm.createFileUploadDialog = createFileUploadDialog;
vm.uploadme = {};
vm.uploadme.src = "";
function createFileUploadDialog() {
createDialog('/app/templates/fileuploadDialog.html', {
id: 'filuploadDialog',
title: 'Upload Contest Image',
backdrop: true,
success: { label: 'Upload', fn: uploadSuccess },
cancel: { label: 'Cancel' },
});
}
function uploadSuccess() {
console.log(vm.uploadme);
//need to call to the backend
}
And inside "fileUploadDialog.html" I have a simple markup
<div>
<input type="file" fileread="uploadme.src" />
</div>
"fileread" is a directive which return back the src of the File. Now the problem I have
As you can see I am doing console.log inside "UploadSuccess", in response I am getting the result "Object {src: ""}",
It looks like the Modal values not capture inside controller. But If I do the same with $rootScope, it logs out the File that need to upload. So, how can I access the value without using $rootScope? Please suggest
PS:
I am not define separate controller for Modal, want to use the same controller that treats my view.
** Modals scope is not the same as your controller scope!**
if you want to see your Controller scope inside of your modal and manupulate it , you're gonna have to use resolve inside of your modal markap like this :
createDialog('/app/templates/fileuploadDialog.html', {
id: 'filuploadDialog',
title: 'Upload Contest Image',
backdrop: true,
success: { label: 'Upload', fn: uploadSuccess },
cancel: { label: 'Cancel' },
resolve:{
controllerscope:function(){
return $scope;
}
}
});
And now , inside of your modal controller you can inject :** controllerscope ** and use it , also data binding works well like this :
app.controller('modalcontroller',function($scope,controllerscope){
// no you have access to your controller scope with **controllerscope**
})
So go and have a look at your modal plug in wich you are using and search for resolve and controller
thats it
I want to create a "Header" service to handle the title, buttons, and color of it.
The main idea is to be able to customize this header with a single line in my controllers like this:
function HomeCtrl($scope, Header) {
Header.config('Header title', 'red', {'left': 'backBtn', 'right': 'menuBtn'});
}
So I created a service (for now I'm only focussing on the title):
app.service('Header', function() {
this.config = function(title, color, buttons) {
this.title = title;
}
});
...And a directive:
app.directive('header', ['Header', function(Header) {
return {
restrict: 'E',
replace: true,
template: '<div class="header">{{title}}</div>',
controller: function($scope, $element, $attrs) {
$scope.$watch(function() { return Header.title }, function() {
$scope.title = Header.title;
});
}
};
}]);
So, this actually works but I'm wondering if there are no better way to do it.
Especially the $watch on the Header.title property. Doesn't seem really clean to me.
Any idea on how to optimize this ?
Edit: My header is not in my view. So I can't directly change the $scope value from my controller.
Edit2: Here is some of my markup
<div class="app-container">
<header></header>
<div class="content" ng-view></div>
<footer></footer>
</div>
(Not sure this piece of html will help but I don't know which part would actually...)
Thanks.
If you are using title in your view, why use scope to hold the object, rather than the service? This way you would not need a directive to update scope.header, as the binding would update it if this object changes
function HomeCtrl($scope, Header) {
$scope.header = Header.config('Header title', 'red', {'left': 'backBtn', 'right': 'menuBtn'});
}
and refer to title as
<h1>{{header.title}}</h1>
Update
Put this in a controller that encapsulates the tags to bind to the header:
$scope.$on("$routeChangeSuccess", function($currentRoute, $previousRoute) {
//assume you can set this based on your $routeParams
$scope.header = Header.config($routeParams);
});
Simple solution may be to just add to rootScope. I always do this with a few truly global variables that every controller will need, mainly user login data etc.
app.run(function($rootScope){
$rootScope.appData={
"header" : {"title" : "foo"},
"user" :{}
};
});
.. then inject $rootScope into your controllers as warranted.
I would like to create form with fields created in directive. Data binding of data working correctly but validation doesn't work.
this is html:
<body ng-controller="MainCtrl">
<h1>form</h1>
<form name="form">
<div ng-repeat="conf in config">
<div field data="data" conf="conf"></div>
</div>
</form>
<pre>{{data|json}}</pre>
</body>
controller and field directive:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = {name: '', age: ''}
$scope.config = [
{field: 'name', required:true},
{field: 'age'}
];
});
app.directive('field', function ($compile) {
return {
scope: {
data: '=',
conf: '='
},
link: function linkFn(scope, element, attrs) {
// field container
var row = angular.element('<div></div>');
// label
row.append(scope.conf.field + ': ');
// field input
var field = angular.element('<input type="text" />');
field.attr('name', scope.conf.field);
field.attr('ng-model', 'data.' + scope.conf.field);
if (scope.conf.required) {
field.attr('required', 'required');
}
row.append(field);
// validation
if (scope.conf.required) {
var required = angular.element('<span>required</span>');
required.attr('ng-show',
'form.' + scope.conf.field + '.$error.required');
row.append(required);
}
$compile(row)(scope);
element.append(row);
}
}
});
problem is that validation for field name doesn't work and validation text required is never shown. May be form in ng-show is unknown in directive. But I don't know how to pass form into field directive. Can you help me how to fix it? Thanks.
here is live code: http://plnkr.co/edit/j0xc7iV1Sqid2VK6rMDF?p=preview
Todo:
before:
$compile(row)(scope);
element.append(row);
after:
element.append(row);
$compile(row)(scope);
p/s in 'planker' for facilities add css:
.ng-invalid {
border: 1px solid red;
}
You'll need to use ng-form directive and push the dynamic field directly into form object.
This thread can help you out:
https://github.com/angular/angular.js/issues/1404
Here is a plunker forked from yours to fix you're issue:
http://plnkr.co/edit/qoMOPRoSnyIdMiZnbnDF?p=preview
To summarize, I added a watch that will toggle the error message instead of using the ng-show directive. Things can get hairy when you attempt to dynamically add a directive within a directive link. For a simple use case as this, it is quicker to add your own watch.
You may also look at this directive which is preconfigured to handle many use cases for validation as well as allow you to create custom validations easily https://github.com/nelsonomuto/angular-ui-form-validation
var toggleRequiredErrorMessage = function (invalid) {
if(invalid === true) {
addRequiredErrorMessage();
} else {
removeRequiredErrorMessage();
}
};
scope.$watch( watchIfRequired, toggleRequiredErrorMessage );