I have the directive that find the elements height and need to have the same value to the controller from the directive.
I tried the below mentioned code and i could not find the solution, am facing some issues.
Could anyone help me on this?
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="myModule">
<div myDirective style="height: 300px;" ng-controller="myheight">
{{numvalue()}}
</div>
</body>
</html>
script.js for directive
angular.module('myModule', [])
.directive('myDirective', function($timeout) {
return {
restrict: 'A',
link: function(scope, element) {
scope.height = element.prop('offsetHeight');
scope.width = element.prop('offsetWidth');
}
};
})
;
contoller.js for controller
angular.module('myModule', []).controller("myheight", function($scope){
$scope.numvalue = function(){
$scope.divHeight = $scope.height;
return $scope.divHeight;
}
});
You don't need $scope.numvalue();
Your directive looks fine. Just add it to the html and change code to following.
<div ng-app="myModule">
<div style="height: 300px;" my-directive ng-controller="myHeight">
Getting height {{height}}
</div>
</div>
JSFiddle
--EDIT--
Check the updated fiddle
JSFiddle
just expose a varible of controller to the directive. after compilation process of the directive you can access the scope variable divHeight in your controller.
angular.module('myModule', [])
.directive('myDirective', function($timeout) {
return {
restrict: 'A',
scope:{
divHeight: '='
},
link: function(scope, element) {
scope.divHeight = element.prop('offsetHeight');
scope.width = element.prop('offsetWidth');
}
};
});
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="myModule">
<div myDirective div-Height="divHeight" style="height: 300px;" ng-controller="myheight">
{{numvalue()}}
</div>
</body>
</html>
Related
I try to implement a tooltip with angularjs template inside. For this, I use "uib-tooltip-html" and I add an attribute on the element to compile the template. But it doesn't work.
Here is the code
Here is the plunker
http://plnkr.co/edit/y1TvogsFFBoBVra3gO3F?p=preview
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>uib-tooltip-html test</title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-sanitize.min.js"></script>
<script>
var app = angular.module("test", ['ngSanitize','ui.bootstrap']).config(function($sceProvider) {
$sceProvider.enabled(false);
});
app.controller("testController", function($scope, $http, $interval, $sce) {
$scope.text = $sce.trustAsHtml('<table><tr ng-repeat="x in [1,2,3]"><td>{{ x }}</td></tr></table>');
});
app.directive('compileTemplate', function($compile, $parse){
return {
link: function(scope, element, attr){
var parsed = $parse(attr.uibTooltipHtml);
console.log(attr.uibTooltipHtml);
function getStringValue() { return (parsed(scope) || '').toString(); }
console.log(getStringValue())
//Recompile if the template changes
scope.$watch(getStringValue, function() {
console.log('ca passe');
$compile(element, null, -9999)(scope); //The -9999 makes it skip directives so that we do not recompile ourselves
});
}
}
});
</script>
</head>
<body>
<div ng-app="test" ng-controller="testController">
<p style="margin-top: 5em;" uib-tooltip="Some text" >
A Thing With a Tooltip
</p>
<p style="margin-top: 5em;" uib-tooltip-html="text" compile-template>
A Thing With an HTML Tooltip
</p>
</div>
Thank you in advance for your answer
You can use uib-tooltip-template like this:
<p style="margin-top: 5em;" uib-tooltip-template="'myTooltipTemplate.html'">
A Thing With an HTML Tooltip
</p>
And then in put your html in myTooltipTemplate.html:
<table><tr ng-repeat="x in [1,2,3]"><td>{{ x }}</td></tr></table>
The template goes in a separate file.
documentation: https://angular-ui.github.io/bootstrap/#/tooltip
plnkr: http://plnkr.co/edit/tiCHpd0LipixXbO4Xfa5?p=preview
I have just started learning Angular and trying to print some text through angular custom directive. but nothing is getting print. Please help me out. Here is the index.html and script.js file.
angular.module('main', [])
.controller('mainCtrl', function ($scope) {
$scope.name = "firoz";
})
.directive('myDir', function () {
return {
restrict : 'E',
template: '<div>Trying to print this text</div>'
};
});
<!DOCTYPE html>
<html ng-app="main">
<head>
<script data-require="angular.js#1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<mydir></mydir>
</body>
</html>
Here is the Plunker link : http://plnkr.co/edit/ub9Ch34OtckzQuCI9sDk?p=preview
You need to hyphenate anywhere that has a capital when used in the directive, like:
<my-dir></my-dir>
The correct Angular syntax is:
<my-dir></my-dir>
angular.module('main', [])
.controller('mainCtrl', function ($scope) {
$scope.name = "firoz";
})
.directive('myDir', function () {
return {
restrict : 'E',
template: '<div>Trying to print this text</div>'
};
});
<!DOCTYPE html>
<html ng-app="main">
<head>
<script data-require="angular.js#1.3.17" data-semver="1.3.17" src="https://code.angularjs.org/1.3.17/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<my-dir></my-dir>
</body>
</html>
I have 2 things to do:
custom directive for dropdowns
custom directive for upload
var app=angular.module('app.directives', []);
app.directive('dropdowns', function() {alert("dropdown directive");
return {
restrict: 'AE',
templateUrl: 'html/uploadFile.html'
};
});
app.directive('uploadDir', function() {
alert("upload directive");
return {
restrict : 'AE',
templateUrl : 'html/dropdowns.html'
};
});
The directive for dropdown is working
But the directive for upload is not working(the alert message in uploadDir directive is not getting displayed)
Is the syntax correct?
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="ISO-8859-1">
<title>upload using directive</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="lib/ui-bootstrap-tpls-0.13.0.js"></script>
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/controllers.js"></script>
<script type="text/javascript" src="js/services/services.js"></script>
<script type="text/javascript" src="js/directives/directives.js"></script>
</head>
<body>
<div>
<div dropdowns></div>
<div uploadDir></div>
</div>
</body>
</html>
Use <div upload-dir></div>. Directive names in camel case are normalised with dashes when matching against HTML elements.
I'm not able to make the ng-bind="data1" capture the input ng-model="data1" from the widget. By clicking and choosing a date, ng-bind is not capturing the chosen date.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js"></script>
<script type="text/javascript">
var Module = angular.module('myapp', []);
myApp.directive('myapp', function datetimepicker() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModel) {
element.datetimepicker({
minView: 2,
autoclose: true,
language: 'pt',
format: 'dd/mm/yyyy',
showMeridian: true,
startView: 2
})
.find('input')
.addClass("form-control");
}
};
});
</script>
</head>
<body ng-app="myapp">
<div id="datetimepicker" class="input-append date" ng-model="data1">
<input ng-model="data1" type="text" datetimepicker></input>
<p ng-bind="data1">
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
</body>
</html>
You should not give the same name myapp to your module and your directive.
Nowhere in your html you are using the directive.
Also, a <div> cannot have a ng-model directive, so this line is wrong:
<div id="datetimepicker" class="input-append date" ng-model="data1">
Your problem is that you need to initialize data1 in your controller:
function($scope) {
// Initialization
$scope.data1 = '';
}
I have written a simple sample custom angular directive and added the directive twice in the HTML.
Below is the sample.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script>
var myDirectives = angular.module('myDirectives', []);
myDirectives.directive('rkitem', function () {
return {
restrict: 'E',
template: '<h4> template text </h4>'
}
});
var myApp = angular.module('myApp', ['myDirectives']);
var ctrl = function ($scope) {
$scope.fname = 'test';
}
myApp.controller('ctrl', ctrl);
</script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="ctrl">
<div class="row">
<rkitem />
<rkitem />
</div>
</div>
</body>
</html>
Expected Output : template text should be displayed twice as rkitem element mentioned twice in HTML
Acutal Output : template text is getting displayed only once
Can anyone please explain why it is getting displayed only once and not twice.
You should add closing tags to your directive elements:
<div class="row">
<rkitem></rkitem>
<rkitem></rkitem>
</div>