I have this function:
$scope.link = function (){
return [{
value: 'https://www.google.it',
text: 'go to details'
}
]
}
i want pass this function in parent controller to the child, i tried to do this:
.directive('card', function(){
var TPL = `<div class="card" style="width: 18rem">
<div class="card-body">
<p>{{c.paragrafo}}</p>
<h4 class="card-title">{{c.title}}</h4>
<h6 class="card-subtitle mb-2 text-muted">{{c.paragrafo2}}</h6>
<p class="card-text"></p>
<a class="card-link">{{c.link()}}</a>
</div>
</div>`
var directive = {
restrict: 'E',
template: TPL,
scope: {
paragrafo: '#',
title: '#',
paragrafo2: '#',
link: '&'
},
controller: ctrlFn,
controllerAs: 'c',
bindToController: true
};
return directive;
function ctrlFn(){
}
})
and in index.html:
<body ng-app="app" ng-cloak>
<div ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col" ng-repeat="demo in demos">
<card title="{{demo.title}}"
paragrafo="{{demo.paragrafo}}"
paragrafo2="{{demo.paragrafo2}}"
link="link()"
></card>
</div>
</div>
</div>
</div>
</body>
But the body of the function returns to me, how can i fix this?
I want to see the link text "go to details" and when I click on it it takes me to the google page
Related
I have this data in my index.js file:
angular.module('app', [])
.controller('MainCtrl', function($scope) {
$scope.demos = [ {
paragrafo: 'richiesta',
title:'demo1',
paragrafo2:'dskjdfdjfdfjkdf',
link: 'https://www.google.it',
},
{
paragrafo: 'richiesta',
title:'demo2',
paragrafo2:'dfhfhfjgfkjghfjkgf',
link: 'https://www.youtube.it',
},
{
paragrafo: 'richiesta',
title:'demo3',
paragrafo2:'sjdsdjddfjdf',
link: 'https://www.sportmediaset.it',
},
{
paragrafo: 'richiesta',
title:'demo4',
paragrafo2:'sdjkdhdkjfhdjfh',
link: 'https://www.elbocon.pe',
},
];
})
.component('card', {
templateUrl: 'card.html'
})
in my card.html component i used ng-repeat, i tried iterating it with ng -repeat:
<div ng-repeat="demo in demos">
<div class="card" style="width: 18rem">
<div class="card-body">
<p>{{demo.paragrafo}}</p>
<h5 class="card-title">{{demo.title}}</h5>
<h6 class="card-subtitle mb-2 text-muted"></h6>
<p class="card-text">{{demo.paragrafo2}}</p>
<a class="card-link">{{demo.link}}</a>
</div>
</div>
</div>
and in index.html, I put the component in the html index as well:
<body ng-app="app" ng-cloak>
<div ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col">
<card></card>
</div>
</div>
</div>
</div>
</body>
But it doesn't work, I would like 4 cards with different data to appear, can someone help me?
You need to bind your data to the component. Additionally, accessing that data inside the component requires a reference to $ctrl.
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.demos = [{
paragrafo: 'richiesta',
title: 'demo1',
paragrafo2: 'dskjdfdjfdfjkdf',
link: 'https://www.google.it',
},
{
paragrafo: 'richiesta',
title: 'demo2',
paragrafo2: 'dfhfhfjgfkjghfjkgf',
link: 'https://www.youtube.it',
},
{
paragrafo: 'richiesta',
title: 'demo3',
paragrafo2: 'sjdsdjddfjdf',
link: 'https://www.sportmediaset.it',
},
{
paragrafo: 'richiesta',
title: 'demo4',
paragrafo2: 'sdjkdhdkjfhdjfh',
link: 'https://www.elbocon.pe',
},
];
}])
.component('card', {
bindings: {
demo: '<'
},
template: '<div class="card" style="width: 18rem"><div class="card-body"><p>{{$ctrl.demo.paragrafo}}</p><h5 class="card-title">{{$ctrl.demo.title}}</h5><h6 class="card-subtitle mb-2 text-muted"></h6><p class="card-text">{{$ctrl.demo.paragrafo2}}</p><a class="card-link">{{$ctrl.demo.link}}</a></div></div>'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<card demo="data" ng-repeat="data in demos">
</card>
</div>
I have an html and I neew to show a pop up. I have this:
<div class="dashboardTr" ng-repeat="post in posts">
<modal-dashboard header="Success" body="post.ID" id="success"></modal-dashboard>
</div>
and this directive:
app.directive('modalDashboard', function() {
return {
restrict: 'E',
scope: {
header: '#header',
body: '=',
id: '#id'
},
templateUrl: '/modalDashboard.html'
}
});
The new HTML of the pop up is:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{ header }}</h4>
</div>
<div class="modal-body">
<p>{{ body }}</p>
</div>
</div>
It doesn't work. If I pass a string into the body property, it works. What's the problem?
It is inside another directive. Could it be the problem?
Thank you!
this should work:
app.directive('modalDashboard', function() {
return {
restrict: 'E',
scope: {
header: '#header',
body: '=body', // <-- make sure to modify this to evaluate body attribute
id: '#id'
},
templateUrl: '/modalDashboard.html'
}
});
Error: https://docs.angularjs.org/error/ng/areq?p0=ProjectsController&p1=not%20a%20function,%20got%20undefined
I mimicked a ng-repeat that I did earlier, the only difference being I didn't split up the directive, controller, and initializing the app into 3 different javascript files. Also, are you allowed to add multiple ng-apps to the <body> tag? If no, then that may be my problem.
HTML:
<div class="projects">
<h2>Projects</h2>
<div class="row">
<div class="col-lg-12">
<div class="row" ng-controller="ProjectsController">
<div class="project-boxes" ng-repeat="project in projects">
<project-info info="project"></project-info>
</div>
</div>
</div>
</div>
</div>
app.js:
var projectApp = angular.module("projectApp", ['ngAnimate'])
.controller('ProjectsController', ['$scope', function($scope) {
$scope.projects = [
{
link: '#',
img: 'img/box.jpeg',
description: 'Project 1'
}];
}])
.directive('projectsInfo', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'components/projects/projects-template/projectsInfo.html'
};
});
I have a custom directive,and also have a controller to bind the data to directive.
I get the data from the server part and bind it to directive.However,I found the data of directive on page do not update when I change scope variable
Here is my code
directive:
angular.module('MyApp')
.directive('stats',function() {
return {
templateUrl:'scripts/directives/dashboard/stats/stats.html',
restrict:'E',
replace:true,
scope: {
'comments': '#',
'number': '#',
'name': '#',
'colour': '#',
'details':'#',
'type':'#',
'goto':'#'
},
link : function($scope,element,attr){
$scope.$watch('number', function(oldValue,newValue) {
console.log(attr);
}, true);
}
}
});
directive template:
<div class="col-lg-3 col-md-6">
<div class="panel panel-{{colour}}">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-{{type}} fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">{{number}}</div>
<div>{{comments}}</div>
</div>
</div>
</div>
<a href="{{goto}}">
<div class="panel-footer">
<span class="pull-left">查看详情</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
controller:
'use strict';
angular.module('MyApp',['ngResource'])
.controller('MainCtrl', function($scope,$state,MyService) {
$scope.result = {};
var names = MyService.get({classtype:'getNames',start:'',end:''},function(){
$scope.pages = names.data;
if (typeof($scope.pages[0]) === 'undefined'){
$scope.selectedItem = 'loading...';
}else{
$scope.selectedItem = $scope.pages[0].name;
}
var res = MyService.get({classtype:'getLastRes',seriesName:$scope.selectedItem},function(){
$scope.result = res;
});
});
$scope.dropboxitemselected = function(item){
$scope.selectedItem = item;
var result = MyService.get({classtype:'getLastRes',seriesName:item},function(){
$scope.result = result;
});
//$scope.result = {};
};
});
HTML:
<div class="row" ng-controller="MainCtrl">
<stats number="{{result.score}}" comments="score" colour="primary" type="heartbeat" goto="#/res/{{result._id}}"></stats>
<stats number="{{result.totalSize}}" comments="size" colour="primary" type="file-code-o" goto="#/res/{{result._id}}"></stats>
<stats number="{{result.count}}" comments="count" colour="red" type="file-text" goto="#/res/{{result._id}}"></stats>
</div>
there is a dropdown box on my page,I need refresh data in directive when I change item by function dropboxitemselected in controller,How can I do?
I think it is because of the scope bindings, you should use '=' for two way binding instead of '#'.
scope: {
'number': '=',
},
And in your HTML remove the brackets from number.
<stats number="result.score" comments="score" colour="primary" type="heartbeat" goto="#/res/{{result._id}}"></stats>
In my directive the example I was looking at here uses <a href="#" ... to put the new image in the container div. I've tried to create that same functionality in my directive but when I click my images it doesn't change my pictBox div. Could I be missing stuff in my css file? Why is the background-image text there? This is my directive:
app.directive('smallPictureBox', [function(){
return {
restrict: 'CA',
replace: false,
transclude: false,
scope: {
index: '=index',
item: '=itemdata'
},
template: '<img src="{{item.url}}"/>',
link: function(scope, elem, attrs) {
if (parseInt(scope.index)==0) {
angular.element(attrs.options).css({'background-image':'url('+ scope.item.url +')'});
}
elem.bind('click', function() {
var src = elem.find('img').attr('src');
angular.element(attrs.options).css({'background-image':'url('+ scope.item.url +')'});
});
}
}
}]);
This is what my html looks like:
<div class="shadow">
<div class="pictureBox">
<div id="pictBox">
<img ng-src="{{primaryImage.url}}">
</div>
</div>
<div class="lowerPictureBox">
<div ng-repeat="image in item.images" options='#pictBox' itemdata='image' index="$index" class="smallPictureBox">
<img ng-src="{{image.url}}">
</div>
</div>
</div>
How can make it so that when I click a picture in the lowerPictureBox it displays it in the pictureBox?
Although i could not replicate your total example but i have a set up a small working code which displays image on top when u click bottom image this could help you
<!DOCTYPE html>
<html ng-app="demo">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
</head>
<body ng-controller="main">
<div class="shadow">
<div class="pictureBox">
<div id="pictBox">
<img ng-src="{{primaryImage.url}}">
</div>
</div>
<div class="lowerPictureBox">
<div small linksrc="primaryImage"></div>
</div>
</div>
<script>
var app = angular.module("demo", []);
app.controller('main', function ($scope) {
$scope.primaryImage = { url: '' };
});
app.directive('small', [function () {
return {
scope: { src: '=linksrc' },
replace:true,
template:"<img ng-src='http://angularjs.org/img/AngularJS-small.png'>",
link: function (scope, elem, attrs) {
elem.bind("click", function () {
scope.src.url = 'http://angularjs.org/img/AngularJS-small.png';
scope.$apply();
});
}
}
}]);
</script>
</body>
</html>