So I have a clearNotification function I want to trigger when I click the '#upload' button. I set an ng-click on that button to trigger notify().
What I'm wondering is if it's a violation of separation of concerns to put that clearNotification function within notify(). Is it better to add that as another ng-click on '#upload'? Or is this where directives come in?
Would love any input on this.
So far, this is what my code looks like:
HTML:
<button id="upload" ng-click="notify()">Upload</button>
Controller:
$scope.clearNotification = function() {
$scope.notification = '';
};
$scope.notify = function() {
$scope.clearNotification();
...
};
There's nothing wrong with calling controller functions from other controller functions.
If the clearNotification function has some business logic, then add it to a service(and inject that service into your controller). Thats the correct way to seperate components.
Should this be a directive? Only if this is a re-usable component that can live alone.
Related
I've got an aside which will be displayed as a pop-up modal. The user will be able to interact with the modal and choose one of either two options.
If the user chooses to reject the offer I would simply like to hide the pop up modal and the overlay.
I can hide the modal - the ng-show works perfectly fine. However, the overlay(which is a separate element, sitting in a separate part in the codebase) does not respect the updated scope value even though they are using the same directive and the value is coming from a singleton. How do I make sure that they are both in sync?
Here's the modal
<aside data-ng-show="!customerRejectedOffer" data-pi-browser-update class="md-modal md-show pi-modal-message modal-effect-2">
<div class="pi-modal-content">
<h4>Title</h4>
<div>
<p>Copy</p>
<ul class="flush--left nav--no-style-type">
<li>
<button class="pi-modal-content-button wb-btn wb-btn--secondary">
<a class="pi-modal-content-link" href="#" title="Upgrade Button">
<admin:keyvalues key="datedbrowser.iebutton"/></a>
</button>
</li>
<li><button class="pi-modal-content-button pi-modal-content-button__refusal" data-ng-click="rejectOffer()"><a class="pi-modal-content-link" title=""></a></button></li>
</ul>
<button data-ng-click="rejectOffer()" class="pi-modal-content-close md-close">X</button>
</div>
</div>
</aside>
To manage the show/hide values as well as to handle the click event I have set up a directive.
(function() {
'use strict';
angular
.module('pi.common.browserupdateMessage', ['pi.common.storage'])
.directive('piBrowserUpdate', browserUpdate);
function browserUpdate(SharedScopeUtility) {
return {
link: browserUpdateLink
};
function browserUpdateLink(scope) {
scope.customerRejectedOffer = SharedScopeUtility.hasAcceptedUpgrade;
console.log(scope);
scope.customerRejectedOffer = customerRejectedOffer;
function rejectOffer()() {
SharedScopeUtility.hasAcceptedUpgrade = true;
scope.customerRejectedOffer = SharedScopeUtility.hasAcceptedUpgrade;
}
}
}
}());
As you can see in the directive, I am setting the initial value of customerRejectedOffer from a service I created called SharedScopeUtility.
(function() {
'use strict';
angular.module('pi.app.sharedscopeutility', [
'ngResource'
])
.factory('SharedScopeUtility', function (){
var hasAcceptedUpgrade = false;
var _service = {
hasAcceptedUpgrade: hasAcceptedUpgrade
};
return _service;
});
}());
When the user clicks the "Rejected Offer Button" I fire off the rejectOffer() function which you can see in the directive.
This function updates the value on the service from false to true and sets a new value on the scope called customerRejectedOffer which I then use in my ng-show. This works just fine for the pop-up modal. However, the overlay element:
<div data-pi-browser-update data-ng-click="rejectOffer()" data-ng-show="!customerRejectedOffer" class="pi-modal-overlay"></div>
Which uses the exact same directive as well as value for it's ng-show but remains visible.
I created a service for this because I wanted the rejectedOffer boolean to come from a singleton, however that still doesn't give me any joy.
Help, please :-)
Most importantly, Have a look at this plunker. The data-ng-show should listen directly to the SharedScopeUtility.hasAcceptedUpgrade service flag. Reference the SharedScopeUtility service on the scope - scope.SharedScopeUtility = SharedScopeUtility.
Your'e returning an empty function here - is it a mistake?:
function rejectOffer()()
rejectOffer() should also be defined on the scope - scope.rejectOffer = function(){}
I've seen cases where directives needed a $timeout to propagate scope changes - but you can avoid that by referencing a service as suggested above.
Good luck and let me know if that helps!
I have an SPA written in AngularJS. The main page uses an ng-include attribute to determine which view to load. This is set in JavaScript when someone clicks on a menu which is contained within the main page. However, I've come across a situation where I need to load a different view by clicking a button within another view, essentially replacing it.
I'm trying to figure out how to do this and from what I've researched, I have to use $rootScope and either an $emit or $broadcast call in the child view and a $rootScope.$on method to detect this event.
The thing is, this doesn't seem to work. I have set my breakpoints and stepped through the code, but I always get this error:
Error: [ngModel:datefmt] http://errors.angularjs.org/1.5.7/ngModel/datefmt?p0=2009-07-21T00%3A00%3A00
Here's the code in my parent page controller:
$rootScope.$on('viewChanged', function () {
var menuItem = {
template: 'customerOrders.html' // will be eventually dynamic
};
navigate(menuItem);
});
function navigate(menuItem) {
$scope.activeMenuItem = menuItem;
}
<div data-ng-include="activeMenuItem.template"></div>
In the child page controller:
function changeSelectedView(viewTemplate) {
$rootScope.$emit('selectedViewChanged', viewTemplate);
}
Obviously I'm doing something wrong here. How do I accomplish what I want, or is there a completely different way to do this?
you can use ng-route to work between views. check https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
First of all, the event name in the $emit function and in the $on function did not match, so I made that fix.
function navigateToNewTemplate(event, viewTemplate) {
var menuItem = {
template: buildTemplateUrl(viewTemplate)
};
navigate(menuItem);
}
$rootScope.$on('selectedViewChanged', navigateToNewTemplate);
function changeSelectedView(viewTemplate) {
$rootScope.$emit('selectedViewChanged', viewTemplate);
}
I have a simple modal that appears when the user enters a page, but it is creating two of them. I have looked through the app and there are not two calls to the modal.
Here is the controller for it:
angular.module('rokoApp')
.controller('FinanceCtrl', function($scope, $modal) {
$modal.open({
templateUrl: 'includes/modal.html',
controller: function ModalInstanceCtrl($scope, $modal,$modalInstance){
console.log('opened')
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
will be much better if you give us an example of functional code in plunker or jsfiddle, because the problem could be in another place.
For example:
When we started creating an app with AngularJS usually we put ng-controller in a upper tag and write the first lines of our app. The problem is that some times when we added routing we forget remove the ng-controller and then the controller is executing twice. The first time with the configuration of the module and again with the processing of the html.
So the solution here is to remove the tag in the html if we use routing or delete the controller property of routing and keep the ng-controller in the html.
I will let you the two codes:
With the error: http://plnkr.co/edit/TmQ5QhjD55WTurQNaEIv
Without the error: http://plnkr.co/edit/1xGUGEvAZ6jUBs8CbhTT
I'm looking to have a function run every time an angular directive updates. In my case, I have an array of modal configurations that get used on a modal markup template.
Every time the template is used to generate a modal due to a change in the model, I want to run a positionModal() method.
scope.$watch in the link function doesn't seem to notice when I change the model, and I cant think of any other way of doing this. I tried a post-link function thinking that the compile function would get called when the directive was applied, but that doesn't seem to work either. Here is my example controller:
MyApp.controller("ModalController", function () {
//Define scope vars
$scope.modals = [];
$scope.$on("modalTrigger", function (event, settings) {
$scope.modals.push(settings);
});
});
Note: I've simplified the controller here- know that it DOES work.
Here is the template code:
<div class="modalParent" ng-controller="ModalController">
<div id="{{modal.id}}" class="modal" ng-class="modal.type" ng-repeat="modal in modals">
<div class="content">
<h2 ng-show="modal.title">{{modal.title}}</h2>
<p>{{modal.message}}</p>
<button>{{modal.button}}</button>
</div>
</div>
</div>
The directive is currently like this:
MyApp.directive("modalParent", function () {
var positionModals = function (element) {
element.find(".modal .content").each(function () {
//position logic here
});
};
return {
restrict: "C",
compile: function (tElement) {
positionModals(tElement);
}
};
});
Note: Also simplified for the purposes here.
The positionModals() call works when the first modal gets pushed to the array. After that, it stops working.
I've tried using the linking function as well, same result. scope.$watch(modals, function(){...}) does not work.
Can somebody help me figure out what I'm doing wrong?
Figured it out!
I was applying the directive to the parent, ".modalParent".
The ng-repeated element in this case is the modal itself ".modal".
You would want the directive to run on elements that get updates as the model changes, because then the linking function will get called each time the element is instantiated, rather than sitting and watching the parent and trying to update from there.
Hope this helps somebody.
Instead of calling like this, my approach is to write this in the services and inject that services in the controller wherever you want to get that function or the data to be notified as,
Services.js
as.service("xyzservice",function(factoryname){
//here the code goes...
})
Now inject in Controller,
ac.controller("controllername",function(xyzservice){
})
ac.controller("controllername",function(servicename){
})
ac.controller("controllername",function(xyzservice){
})
Here we have injected it in the two controller, we can get it.
I want to create a really simple confirmation box using UI-modal, which I have successfully used to make complicated modals that load their template and controller from external files in the past.
It's so simple though that I don't want to rely on external template and controller files, just a simple box with a close button which is somehow wired up to a controller declared directly on the modal instance.
Here is what I have tried unsuccessfully...
var modalInstance = $modal.open({
template: "<div>Message goes here...<button ng-click='cancel()'>Continue</button></div>",
controller: function(){
$scope.cancel = function(){
alert("Cancelled");
};
}
});
Looks like you need to inject $scope into your controller function
controller: function($scope){
The scope of the modal template is not the same as the scope in the controller that you've defined the modal instance in.
The reason you're not getting undefined errors is $scope is a closure variable so adding .cancel() to it works just fine. But, since it isn't the same scope of the modal, so the ng-click doesn't see a .cancel() on its scope.
I replicated in this jsbin: http://jsbin.com/gejuxije/1/edit
Edit:
Since you mentioned you didn't want external files for a template, here's a demo of how to define the template for the modal inside the template of the view it is used on.
http://jsbin.com/gejuxije/2/edit
You can put html inside of an inline script...
<script type="text/ng-template" id="myModalTemplateName.html"></script>
The value you pass to 'template' needs to be valid HTML, and ideally should contain the appropriate modal CSS classes.
You may also need to pass in the scope for the controller.
var modalInstance = $modal.open({
scope:$scope,
template: "<div>Message goes here...<button ng-click='cancel()'>Continue</button></div>",
controller: function(){
$scope.cancel = function(){
alert("Cancelled");
};
}
});
In general I have not had to do this, but since you are defining the controller in the open method it may be necessary. According to the docs it should create a new scope as a child of rootScope, but I suspect your mileage is varying. I wish the instructions on the website were a little more informative on this topic.
You may also want to try $close and $dismiss. I've never tried them, but since you are not having luck with the scope variable these might be what you need.
I am just trying to do something similar and stumbled across this. I know it's old but it might help someone.
Simply put
modalInstance.close();
in the cancel function