I'm creating a Masonry layout populated with images and videos and since the images-loaded directive doesn't work I'm trying to come up with a quick work around. (https://github.com/passy/angular-masonry/issues/116)
The problem I have is the link function is never fires. I'm wondering if it has something to do with ng-if's being encapsulated by an ng-repeat because according to this plunkr (http://jsfiddle.net/q05gret0/) the link function should run whenever ng-if evaluates to true
<div style="margin:auto;" images-loaded="false"
masonry="{isFitWidth: true}">
<div class="masonry-brick media-block"
ng-repeat="mediaItem in media">
<div ng-if="mediaItem.type === 'image/jpeg' || mediaItem.type === 'image/png'">
<img alt="image" class="fill-width" ng-src="{{MEDIA_URL + mediaItem.urlThumbnail}}" data-loaded>
</div>
<div ng-if="mediaItem.type === 'video/mp4'">
<video autoplay="true" loop="loop" muted="muted" data-loaded>
<div trust-url url="mediaItem.url"></div>
</video>
</div>
<div class="media-info container-fluid">
<div class="col-xs-9 no-padding">
<h5 class="media-title">{{mediaItem.name}}</h5>
</div>
<div class="col-xs-3 no-padding">
<button class="btn btn-sm btn-danger" ng-click="deleteMedia(mediaItem)"><i
class="fa fa-trash-o"></i></button>
</div>
</div>
</div>
</div>
And the directive in question:
.directive('dataLoaded', function dataLoaded() {
return {
restrict: 'A',
link: function (scope, iElement) {
console.log("linked!");
iElement.bind('load', function() {
scope.$broadcast("masonry.reload");
});
},
};
})
You are using the wrong directive name
<video autoplay="true" loop="loop" muted="muted" data-loaded>
"data-loaded" looks for a directive with a name "loaded". So you need rename directive to "loaded" or to change the attribute to "data-data-loaded". I'd prefer to rename the directive
Please replace this line:
.directive('dataLoaded', function dataLoaded() {
with that line:
.directive('loaded', function dataLoaded() {
Related
I have a list of items, inside a div, with a ng-repeat angular directive. And I need this list, to use an automatic scrolling, it's a DEMO (it's, use the jquery super-treadmill). How can I do this with angular js (version 1.6)?
<div class="panel-body">
<div ng-repeat="model in collection">
<h1>{{model.name}}</h1>
<p>{{model.description}}</p>
</div>
</div>
you can do it with simple directive
app.directive('startTreadmill', function(){
return {
link: function(scope, element, attr){
$(element).startTreadmill({ direction: "down"});
}
}
})
<div class="panel-body" start-treadmill>
<div ng-repeat="model in collection">
<h1>{{model.name}}</h1>
<p>{{model.description}}</p>
</div>
</div>
I am using same divs in my view but inside of divs are changing.So I want to make it in a directive. What is the way for this?
Example;
<div id="firstDiv">
<div id="secondDiv">
<div id="thirdDiv">
<label....>
</div>
</div>
</div>
<div id="firstDiv">
<div id="secondDiv">
<div id="thirdDiv">
<select....>
</div>
</div>
</div>
<div id="firstDiv">
<div id="secondDiv">
<div id="thirdDiv">
<textArea....>
</div>
</div>
</div>
So i want to make this part as a directive ;
<div id="firstDiv">
<div id="secondDiv">
<div id="thirdDiv">
</div>
</div>
</div>
Can you help ?
Use this:
<my-wrapper>
Your content here
</my-wrapper>
And script (UPDATED: Load html file instead inline html):
module.directive('myWrapper', function ($http, $compile) {
var linker = function (scope, element, attrs) {
$http.get('wrapper.html').success(function (data) {
element.replaceWith($compile(data)(scope));
});
};
return {
restrict: 'E',
link: linker
};
});
JSFiddle
I have created a custom directive to show the error messages in the page. My directive is
app.directive('errorsection', function () {
return {
restrict: 'EA',
scope: {
errors: '=errors'
},
templateUrl: '..../shared/error-section.html'
};
});
error-section.html
<div ng-show="errors.length>0" class="error">
<div id="{{error.Id}}" ng-class="{'error':error.Type=='Error','alert-info alert-dismissible cssDataTargetDismiss-{{error.Id}} fade in':error.Type=='Info'}"
ng-repeat="error in errors track by $index">
<button ng-if="error.Type=='Info'" type="button" class="close" data-toggle="collapse" data-target=".cssDataTargetDismiss-{{alert.Id}}">×</button>
<p><strong ng-bind-html="error.TypeDescription"></strong><span ng-bind-html="error.Message"></span></p>
</div>
I have used this directive in one of my partial page to show the error messages
<div error-section errors="errorList"></div>
this errorList contains 2 messages . if i click the button, message is collapsed. I want to hide the div if all the error messages collapsed..
error messages is showing in view like below format,
______________
|error1 x|
|error2 x|
_______________
can anyone help how to hide the div?
try
<div ng-show="errors.length>0 && message !== 0">
<div id="{{error.Id}}" ng-class="{'error':error.Type=='Error','alert-info alert-dismissible cssDataTargetDismiss-{{error.Id}} fade in':error.Type=='Info'}"
ng-repeat="error in errors track by $index">
<button ng-click="message -= 1" ng-if="error.Type=='Info'" type="button" class="close" data-toggle="collapse" data-target=".cssDataTargetDismiss-{{alert.Id}}">×</button>
<p><strong ng-bind-html="error.TypeDescription"></strong><span ng-bind-html="error.Message"></span></p>
and in your directive controller take the length of the messages and give it to $scope.message.
Change your directive to use replace instead:
app.directive('errorsection', function () {
return {
restrict : 'EA',
scope : {
errors : '=errors'
},
replace: true, //tell it to replace
templateUrl : '..../shared/error-section.html'
};
});
This will make it so that
<div error-section errors="errorList"></div>
And
<div ng-show="errors.length>0" class="error">
Are the same div like this:
<div error-section errors="errorList error" ng-show="errors.length>0">
...
</div>
As opposed to:
<div error-section errors="errorList">
<div ng-show="errors.length>0" class="error">
...
</div>
</div>
I newly start to use angular.but I have some problem to loading my directive.
I want to load my directive as soon as page loaded.
where I load data-show directive
<div class="row">
<div class="col-md-12">
<article class="row" ng-controller="DataCtrl">
<input type="button" ng-click="getDataList()" >
<h1>Some Content Here</h1>
<ul id="home" bread-crumbs></ul>
<ul class="thumbnails">
<li ng-repeat="data in list" class="col-md-5">
<show-data data="data"/>
</li>
</ul>
</article>
</div>
</div>
showData directive:
app.directive('showData', function () {
return{
restrict: 'E',
replace:true,
templateUrl: 'views/directives/datas.directive.html',
scope: {
data: "="
},
controller:'DataCtrl'
}
})
and template I used in:
<div class="well hoverwell">
<div class="row">
<h2 class="col-md-4">{{data.name}}</h2>
</div>
<div class="row">
<span class="col-md-1">Code:</span>
<span class="col-md-1">{{data.id}}</span>
</div>
<div class="row">
<span class="col-md-1">accountability:</span>
<span class="col-md-1">{{data.parent}}</span>
</div>
<div class="row">
<span class="col-md-1"> :</span>
<span class="col-md-1">{{data.definition}}</span>
</div>
</div>
and my controller
'use strict';
angular.module('app')
.controller('DataCtrl', function ($scope, DataService, $log) {
$scope.getDataList = function () {
var list = DataService.getDataList(1);
list.then(
function (result) {
$log.info(result);
$scope.dataList = result;
}, function (status) {
$log.error(status)
$scope.msg = "error " + status + " has been occur,please report to admin ";
});
};
});
and when I run my app it does not work .
when I watch it in chorome development tools my directive is comment
what is my problem.How can I call this directive as soon as page load.
thx
As you already noticed, you see empty list because your dataList in ng-repeat is not filled yet.
But you have some errors in your code:
First of all - you should never use one controller twice. So you need to create separate controller for your directive.
replace directive parameter is deprecated, better not to use it.
In your DataCtrl you set the dataList variable: $scope.dataList = result;, but in HTML you refer to list variable: <li ng-repeat="data in list" class="col-md-5">.
Maybe that example will help you to figure out with your code.
Here i trying to implement application in angular js. I have an minimize/maximize button for all child element and seprate minimize/maximize button to inside child element.
But when i click toggle minimize its minimize all all child element.
Problem is when i click toggleonce it also minimize all child element.
var dashboard = angular.module("dashboard",['ui.bootstrap']);
dashboard.controller('dash-control', ['$scope', function($scope) {
$scope.isHidden = false;
$scope.toggle = function(){
$scope.isHidden = !$scope.isHidden;
};
$scope.toggleonce= function()
{
if( this.isHidden === true)
this.isHidden = false;
else
this.isHidden = true;
};
}]);
VIEW:
<div class="contentpanel" ng-app="dashboard" ng-controller="dash-control as ctrl">
<button class="btn btn-white" type="button" ng-click="toggle()">
<i class="fa fa-minus-square"></i>
</button>
<div>
<a href="" class="tooltips" ng-click="toggleonce()" title="Minimize Panel">
<i class="fa fa-minus"></i>
</a>
<div class="row tinychart" ng-show="isHidden">Contenr Heading 1</div>
<div class="row tinychart" ng-hide="isHidden">Content Description 1</div>
</div>
<div>
<a href="" class="tooltips" ng-click="toggleonce()" title="Minimize Panel">
<i class="fa fa-minus"></i>
</a>
<div class="row tinychart" ng-show="isHidden">Contenr Heading 2</div>
<div class="row tinychart" ng-hide="isHidden">Content Description 1</div>
</div>
......
.....
.....
</div>
The variable $scope.isHidden is a controller level variable and by clicking toggleonce() you are changing the variable to true through out the page(since both the 'minimize panels' are in the scope of the controller. Thereby any ng-hide for isHidden will be hidden and thereby it is causing the global 'minimise'.
You have two options:
1) use separate variables for each Minimize panel and toggle the values of that variable when you click on the corresponding function. Also write the Panel level 'ng-hide's for its own variable.
2) write a isolated scope directive for all Minizable panels. And isolate its scope from the Controller. Now write a toggleonce function in the directive which changes the value of the Hidden variable within the directive's scope. You must use the following syntax while writing the directive:
.directive('minimizePanel', function() {
return {
scope: true,
};
You can watch this video for more inputs.