When I click the Not heart div, all Not heart div must hide and all Hearted div will show. When I click the Hearted div, all Hearted div must hide and all Not heart div will show. The same interaction to collection component. When the hearted div is showing, the heartNumber have to add 1. When the Not heart div is showing, the heartNumber have to delete 1.
My application architecture is like this:
heart folder is on:
https://jsfiddle.net/jiexishede/Ltsgnn86/1/
collection folder is on:
https://jsfiddle.net/jiexishede/hq6dju3c/1/
show folder is on:
https://jsfiddle.net/jiexishede/e9bxf1f9/1/
The code in index.html is below :
<body ng-app="app" ng-controller="controller">
<div style="margin-bottom: 10px">
<heart is-heart="heartBoolean"></heart>
<collection is-collection="collectionBoolean"></collection>
</div>
<div>
<shownumber collection-number="10" heart-number="10"></shownumber>
</div>
<div style="margin-top: 10px">
<heart is-heart="heartBoolean"></heart>
<collection is-collection="collectionBoolean"></collection>
</div>
</body>
<script src="angular.js"></script>
<script src="collection/collectionComponent.js"></script>
<script src="heart/heartComponent.js"></script>
<script src="show/showComponent.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('controller', function ($scope) {
$scope.heartBoolean = true;
$scope.collectionBoolean = true;
})
</script>
<script>
collectionComponentFactoryFun('app','./collection');
showComponentFactoryFun('app','./show');
heartComponentFactoryFun('app','./heart');
</script>
Now, I have changed the text in the demo. The demo uses the variable named collectionBoolean and the variable named heartBoolean. If you change the boolean state in the component. I will vote your code, due to your code is not coupled.
I hope that is not too late.... According to what I see in your code I reckon that the main issue is with the way that you are setting up your main module and components.
I've just worked around a little bit I came up with this hope it will work.
angular.module('plunker', []);
angular
.module( 'plunker' )
.controller( 'MainCtrl', function ( $scope ) {
$scope.isHeart = true;
$scope.isCollection = true;
});
var HeartCtrl = function () {
var ctrl = this;
ctrl.$onInit = function () {
var isHeart = angular.copy( ctrl.isHeart );
console.log( 'isHeart : ', isHeart );
};
ctrl.$onChanges = function ( changes ) {
if ( changes.isHeart && !changes.isHeart.isFirstChange() ) {
ctrl.isHeart = angular.copy( changes.isHeart );
}
};
ctrl.clickHeartFun = function (boolean_number) {
ctrl.isHeart = boolean_number;
};
};
angular
.module( 'plunker' )
.component( 'heart', {
bindings: {
isHeart : '<'
},
templateUrl : 'heart.tpl.html',
controller : HeartCtrl
});
http://plnkr.co/edit/RJwYJ2iAxEQOV5jBwyXj?p=preview
Related
basically i want to change the attribute value based on the button i clicked,
these are the two buttons
<button ng-click="fn(a)"></button>
<button ng-click="fn(b)"></button>
and then i have a prebuilt directive who takes value as input,
<div directive-name="" id="abc"></div>
if i click on first button,i want the value of directive based on button clicked.
What i did earlier;
$scope.go = function(data){
if(data==a){
var b = document.querySelector( 'div' );
b.setAttribute("directive-name","value");
}
else{}
}
here the problem is that it is selecting the first div of document and setting attribute value for that.
I also tried to pass it with id like
var b = angular.element(document.querySelector('#abc'));
I also saw some custom directives to do so, but they are not working
AngularJS DOM Manipulation through Directives
If possible provide me a demo in plunkr or fiddle
and also if i want to change css property of div based on button clicked
Thanks in advance
You can do it like this.
Assign the directive-name value to a $scope.variable and then use variable as the value in HTML.
HTML - 1:
<button ng-click="go(a)"></button>
<button ng-click="go(b)"></button>
HTML - 2:
<div directive-name="{{directive}}" id="abc"></div>
JS:
$scope.go = function(data){
if(data==a){
$scope.directive = "directive-1";
}else if(data==b){
$scope.directive = "directive-2";
}
}
To assign class name to div you can define other $scope.classVar and then use that in HTML like below:
<div directive-name="{{directive}}" id="abc" ng-class="classVar"></div>
I hope this will solve your problem.
This should work, (you had some errors in your code):-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.fn = function(data,id) {
if (data == 'a') {
var b = document.querySelector('#'+id);
b.setAttribute("directive-name", "value");
} else {
}
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div directive-name="" id="abc"></div>
<button ng-click="fn('a','abc')">A</button>
</div>
"Basically I want to change the attribute value based on the button I clicked."
You can do this by changing the attribute value the angular way, referencing a property of $scope or the controller instance in your template. When clicking a button, set the variable to the value you require to be passed to your directive.
Note: When you pass a value into your ngClick directive, you need to pass it as a string unless a and b are declared as properties of $scope.
Here's a basic example:
// app.js
(function() {
'use strict';
angular.module('app', []);
})();
// main.controller.js
(function() {
'use strict';
angular.module('app').controller('MainController', MainController);
MainController.$inject = ['$scope'];
function MainController($scope) {
$scope.fn = fn;
function fn(data) {
// set the value so it's accessable in the view
// therefore we can pass it into our directive
$scope.myVar = data;
}
}
})();
// directive-name.directive.js
(function() {
'use strict';
angular.module('app').directive('directiveName', directiveNameDirective);
function directiveNameDirective() {
return {
restrict: 'A',
scope: {
directiveName: '='
},
template: '<span>directiveName: {{ directiveName }}</span>'
};
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainController as MainCtrl">
<!-- here we pass a and b as strings otherwise they get evaluated as variables -->
<button ng-click="fn('a')">Set a</button>
<button ng-click="fn('b')">Set b</button>
<hr>
<!-- here we pass myVar which is declared as a property of $scope when the fn function is called -->
<div directive-name="myVar" id="abc"></div>
<hr> myVar: {{ myVar }}
</div>
</div>
One 'correct' way to specify multiple actions within an ng-click is to separate each one with a semi-colon, however I've come across code that specifies two ng-click directives on the same tag. Will both sets of the ng-click instructions be carried out, will this cause an error, or will only one or other of the ng-click instructions be executed?
When you have many ng-clicks on a tag, only the first one will get executed.
DEMO
var myApp = angular.module('myApp', []);
myApp.controller('CookieCtrl', function ($scope) {
$scope.print1 = function () {
alert("first");
}
$scope.print2 = function () {
alert("second");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div id="button-holder" ng-controller="CookieCtrl">
<button ng-click="print1()" ng-click="print2()">Bump!</button>
</div>
</div>
You could also have many functions executed on ng-click using a ; separated.
DEMO
var myApp = angular.module('myApp', []);
myApp.controller('CookieCtrl', function ($scope) {
$scope.print1 = function () {
alert("first");
}
$scope.print2 = function () {
alert("second");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div id="button-holder" ng-controller="CookieCtrl">
<button ng-click="print1();print2();">Bump!</button>
</div>
</div>
I have component inside of the controller and i'm binding the data to it. How to make changes in component visible in the controller.
I have that code:
JS
app.controller('TheCtrl', function($scope) {
$scope.changeable = 'earlier';
});
app.component('innerComponent', {
bindings: {
changeable: '='
},
controller: function() {
this.changeable = 'later';
}
}
HTML
<div ng-controller="TheCtrl">
<inner-component changeable="val"></inner-component>
<p>
{{changeable}}
</p>
</div>
And it doesn't change the 'changeable' value in the view of the controller (it show "earlier" value). Why? How to make the changes visible in the controller?
It does work as expected.
function appCtrl() {
this.value = "test";
}
var inner = {
bindings: {
changeable: '='
},
controller: function() {
this.changeable = 'later';
}
};
angular.module('app', []);
angular.module('app')
.controller('appCtrl', appCtrl)
.component('inner', inner);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="appCtrl as ctrl">
<inner changeable="ctrl.value"></inner>
<p>
{{ctrl.value}}
</p>
</div>
</div>
However you shouldn't use components for building MVW apps.
You either go all the way and create a component root with children components or use "controlled divs".
But hybrid MVC/components apps are bad architecture.
Say, I have multiple directives, on click how can i add the "directive" what i want to "popup". i have number of scenario, but using only one pop-up for all. whenever the appropiate element is clicked, using the same pop-up, i would like to update the other 'directives'
for sample, i created only one. click on the red bordered title
here is my code :
<div ng-controller="main">
{{name}}
<div class="info" ng-click="popIt()">
<info-board></info-board>
</div>
<div class="popup" ng-if="show" ng-click="popIt()">
//add directive dynamically - how?
</div>
</div>
</body>
<script type="text/ng-template" id="modalPopup.html">
<div class='ng-modal'>
some information here.
</div>
</script>
js:
var myApp = angular.module("myApp", []);
myApp.controller("main", function($scope) {
$scope.name = "Mo!";
$scope.show = false;
$scope.popIt = function (show) {
$scope.show = !$scope.show;
}
})
myApp.directive("infoBoard", function() {
return {
replace : true,
templateUrl: "modalPopup.html",
scope : {},
link : function (scope, element, attrs) {
element.append("Hi there!")
}
}
})
Demo Onlie
I am learning routing with angular java script ,
this is my index.html
<html lang="en" ng-app="eventsApp">
.....
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Create Event</li>
</ul>
</div>
</div>
<ng-view></ng-view>
</div>
This is my app.js,
var eventsApp = angular.module('eventsApp', ['eventsApp', 'ngRoute'])
eventsApp.config(function($routeProvider) {
$routeProvider.when('/newEvent',
{
templateUrl:'templates/NewEvent.html',
controller: 'EditEventController'
}).....
When i click on the button it do nothing and also doesn't load new event .
and get this error
"Error: [$injector:modulerr] Failed to instantiate module eventsApp due to:"
here is the controller
'use strict';
eventsApp.controller('EditEventController',
function EditEventController($scope, eventData) {
$scope.event = {};
$scope.saveEvent = function (event, form) {
if(form.$valid) {
eventData.save(event);
}
};
$scope.cancelEdit = function () {
window.location = "/EventDetails.html";
};
}
);
One of the things I'm noticing looks wrong is that you're passing in eventsApp as a dependency of itself.
var eventsApp = angular.module('eventsApp', ['eventsApp', 'ngRoute'])
Should be:
var eventsApp = angular.module('eventsApp', ['ngRoute'])
Secondly, you may want to check that you've included ngRoute into the page:
See installation instructions here: http://docs.angularjs.org/api/ngRoute
Check out a working example on Plunkr:
http://plnkr.co/edit/VZgTnBvi0Q8qtcpOUTx0