This is my url - charts/53d25d91959679701e362f25 and when I add ?widget=true to that link charts/53d25d91959679701e362f25?widget=true I have to hide two particular divs in charts/53d25d91959679701e362f25 page.
I've tried - ng-if="location.path()" but is not working for ?widget=true
You cannot use $location service in ng-if directive
User $location to set some scope and tie ng-if to that scope variable.
if(angular.isDefined($location.search().widget)) {
$scope.isHidden = true;
}
else {
$scope.isHidden = false;
}
ng-if="isHidden"
Related
I'm new in angular and i'm looking for the best way to do what I want.
In my main page I have 2 directives, one is used to display a button (and maybe other stuff). And another used to display a kind of dialog box/menu.
Each directive has its own controller.
I want to show or hide the second directive when I click on the button in the first one.
I don't really know what are goods or wrong approaches. Should I use a service injected in both controller and set a variable with ng-show in the second directive? This solution doesn't really hide the directive because I need a div inside the directive to hide its content and isn't too much to use a service only for one boolean?
Should I use a kind of global variable (rootscope?) or inject the first controller inside the second one?
Or maybe use a third controller in my main page (used with a service?) or use only one controller for both directive?
Basically without directive I would probably used only one main controller for my whole page and set a variable.
In fact the first directive is just a kind of button used to display "something", and the second directive just a kind of popup waiting a boolean to be displayed. That's why I finally used a service containing a boolean with a getter and a setter to avoid any interaction beetween both controller.
My both controller use this service, the first one to set the value when we click on the element and the second controller provide just a visibility on the getter for my ng-show.
I don't know if it is the best way to do but I am satisfied for now.
Small example here (without directive but with same logic) :
http://codepen.io/dufaux/pen/dXMrPm
angular.module('myModule', []);
angular.module("myModule")
.controller("ButtonCtrl", buttonCtrl)
.controller("PopUpCtrl", popUpCtrl)
.service("DisplayerService", displayerService);
//ButtonCtrl
buttonCtrl.$inject = ["DisplayerService", "$scope"];
function buttonCtrl(DisplayerService, $scope) {
var vm = this;
vm.display = function(){
DisplayerService.setDisplay(!DisplayerService.getDisplay());
}
}
//PopUpCtrl
popUpCtrl.$inject = ["DisplayerService"];
function popUpCtrl(DisplayerService) {
var vm = this;
vm.displayable = function(){
return DisplayerService.getDisplay();
}
}
//Service
function displayerService(){
var vm = this;
vm.display = false;
vm.setDisplay = function(value){
vm.display = value;
}
vm.getDisplay = function(){
return vm.display;
}
}
--
<body data-ng-app="myModule">
<div data-ng-controller="ButtonCtrl as btnCtrl" >
<button data-ng-click="btnCtrl.display()">
display
</button>
</div>
[...]
<div data-ng-controller="PopUpCtrl as popUpCtrl" >
<div data-ng-show="popUpCtrl.displayable()">
hello world
</div>
</div>
</body>
I tried the ng-class directive with a ternary and it works very well when the page load. My reference is the widthWindow.xs variable, it is "true" when the window size is a mobile, but there is a resize put it to "false" but the class does not change, the ng-class not dynamically changes. Why?
in the controller:
$scope.myResize = funcion(){
var number = $window.innerWidth;
if (number > 767) {
$scope.widthWindow.xs = false;
}else{
$scope.widthWindow.xs = true;
}
};
in the html:
<p ng-class="widthWindow.xs ? 'borderVoteNewsTop' : 'borderVoteNewsLeft'">Don't change when there is a resize</p>
Since the 'resize' event comes form outside the Angular framework, you need to integrate its actions with the AngularJS digest cycle. Use $apply.
$scope.myResize = function(){
var number = $window.innerWidth;
if (number > 767) {
$scope.$apply("widthWindow.xs = false");
}else{
$scope.$apply("widthWindow.xs = true");
}
};
After the $apply executes the Angular expression, it will automatically invoke a digest cycle and the watcher in the ng-class directive will see the change and update the class.
Your syntax for the ngClass directive is not correct.
Use it as following:
<p
ng-class="{'borderVoteNewsTop': widthWindow.xs, 'borderVoteNewsLeft': !widthWindow.xs}"
>
Change when there is a resize
</p>
Check out the directive documentation: https://docs.angularjs.org/api/ng/directive/ngClass
I have a feedback feature on my app,
#feedback
%h3.button
%a{"ui-sref" => ".feedback", "ng-click" => "feedbackActive=!feedbackActive;"}
Feedback
#feedback-container{"ng-if" => "feedbackActive"}
%div{"ui-view" => "feedback"}
The #feedback-container has a ng-if so that the content is only loaded when needed. The %a has a ng-click that toggles between true/false for the the feedbackActive state.
This works fine. Howoever in my ui-view I load a template. In that template is a send button that has a send() function linked to the feedbackCtrl,
$scope.send = function(){
console.log ('send')
console.log ($scope.feedbackForm)
createFeedback.create({
name: $scope.feedbackForm.name,
feedback: $scope.feedbackForm.feedback
})
$scope.feedbackActive = false;
}
It runs the code fine, but doesn't give the feedbackActive the false value so nothing happens.
How do remove toggle the ng-if from outside the controller?
This is a classic scoping issue. Your controller's scope is a child of the scope of the ng-if directive. One option is to use $scope.$parent to set the variable on the parent scope.
$scope.send = function(){
console.log ('send')
console.log ($scope.feedbackForm)
createFeedback.create({
name: $scope.feedbackForm.name,
feedback: $scope.feedbackForm.feedback
})
$scope.$parent.feedbackActive = false;
}
The other option is to take advantage of prototypical inheritance. In the parent controller, initialize an object.
$scope.x = {}; //parent scope
In the view controller, set properties on the inherited object.
$scope.x.feedbackActive = false; //child scope
And of course in your HTML
<feedback-container ng-if="x.feedbackActive">
Please, how can I change this code into angularJs
$('a.product_add').on('click', function(event){
event.preventDefault();
var collectionHolder = $('#task_tags');
var prototype = collectionHolder.attr('data-prototype');
form = prototype.replace(/__name__/g, collectionHolder.children().length);
collectionHolder.append(form);
});
First of all you need to show us what you've tried, but I'll write something here to help you
You should make a directive because you're using jquery code. Read more about directives here
AngularJS directives are extended HTML attributes with the prefix ng-.
The ng-app directive initializes an AngularJS application.
The ng-init directive initializes application data.
The ng-model directive binds the value of HTML controls (input,
select, textarea) to application data.
Example of a directive
app.directive('myDirective', function(){
function link($scope,$elem,$attrs){
$elem.on('click', function(event){
// click event code here
});
}
return {
link:link,
scope:{},
restrict:'A'
}
})
Example of usage for myDirective:
<a class='product_add' my-directive>link</a>
We can use angular custom directives.
Now you can access the element in the directive and do the same operations in the directive.
<directive-element ng-click=appendFunction()></directive-element>
I have to fetch value of scope variable defined in directives. I have to get value of that scope variable in controller using AngularJS. How can i fetch value of scope variable?
Directive
app.directive('checkToggle', function() {
return {
scope: true,
link: function ($scope, element, attrs) {
$(element).on('click', function() {
$(element).find('i').toggleClass('icon-check icon-check-empty');
if ($(element).find('i').hasClass('icon-check')) {
$scope.isChecked = 'true';
} else {
$scope.isChecked = 'false';
}
});
}
}
});
I have to get $scope.isChecked value in controller.
If I understand your use-case correctly you would like to toggle an icon on click. If so you don't need to write any directive for this. And provided that you would like to write a directive your shouldn't go about it as you've started. Your code is very imperative, jQuery-like while AngularJS power is in driving declarative UI based on model changes.
Anyway, toggling an icon can be easily done with standard AngularJS directives:
<i ng-class="{'icon-star' : isChecked, 'icon-star-empty': !isChecked}" ng-click="isChecked = !isChecked"></i>
Here is a working plunk: http://plnkr.co/edit/nXXQA41w00Cpeo6tTibg?p=preview