I am loading dinamically in my webapp "components", which has a directive, and a template, like the following:
angular.module('app')
.directive('carousel', function() {
return {
restrict: 'E',
scope: {
left: '#',
top: '#'
},
templateUrl: 'carousel.html'
};
});
This template can have CSS dependencies, and it will work, but it won't work with Javascript. How do you think it could work?
Template example (carousel.html)
<link rel="stylesheet" type="text/css" href="example.css" media="all"> //This works
<script src="jquery.min.js"></script> //This don't work. It doesn't even request the file to the server.
<script>
alert('This alert is not executed');
function alertFn(){
alert('This alert is not executed even calling the function from other parts of the code');
}
</script>
<p class="templateExample">This template paragraph is loaded correctly in the view</p>
At the end the problem was solved using jquery as a main dependency.
Empirically I can see that when you use the Javascript files and scripts from the templates is effectively loaded.
Related
I am trying to lazy load a directive within another directive based on a condition. I have a main directive and within it I have a <script> tag. The included directive loads properly only when jquery is present, the problem is that not all of my pages load jquery. There is also a second warning...
synchronous XMLHttpRequest on the main thread is deprecated.
Which I should be able to suppress if I find a pure angularJs way of loading the script.
Here is my setup
<my-directive>
<script ng-if="expression" src="../path" type="application/javascript"></script>
</my-directive>
very simple, but it only works if jquery is there to load it. I tried to load it via $http.get() request and then eval() (which I know the dangers) but that did not work.
Here is a way which leverages the $http approach. You can create a directive which augments your <script> tag for this functionality, checking for a defined type attribute. You could of course modify this check however you'd like. Observe the following...
app.directive('script', function($http) {
return {
restrict: 'E',
scope: false,
link: function(scope, elem, attrs) {
if (attrs.type === 'text/javascript-lazy') {
$http.get(attrs.src).then(function(response) {
var code = response.data;
var f = new Function(code);
f();
});
}
}
};
});
<!-- retrieved -->
<script type="text/javascript-lazy" ng-if="true" src="script.js"></script>
<!-- not retrieved -->
<script type="text/javascript-lazy" ng-if="false" src="script.js"></script>
This will work inside an element wrapped directive as well.
Plunker - working demo
I want to use this tinyColorPicker plugin https://github.com/PitPik/tinyColorPicker but it's proving extremely difficult to use it in my angular app.
I keep getting this error:
TypeError: element.colorPicker is not a function
In my index.html
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/tinycolorpicker/lib/jquery.tinycolorpicker.js"></script>
I have then made a directive to instantiate the plugin
'use strict';
angular.module('myApp')
.directive('colorWheel', function() {
return {
restrict: 'A',
link: function(scope, element) {
element.colorPicker();
}
};
});
And in my HTML I have this div with the directive
<div id="colorWheel" color-wheel></div>
According to their docs that is all I have to do. I must be missing something key when it comes to integrating it with Angular. Can anyone see anything? Thanks
Element is not a jQuery object, it is an angular object. The plugin is is exposed on the jQuery object. Try using jQuery selectors in your link fn e.g. jQuery("#yourDomId").colorPicker()
You have to load jQuery before you loading angularjs.
If you will load jquery after loading angular you will get the jqLite.
<script src="jquery.js"></script>
<sciprt src="angular.js"></script>
In a thirth party framework, A html page can be modified by providing javascript code that will be added by the framework to the window onload. From their content can be written to the AddIn div element.
How could I inject a angular application into this div element (HTML + js).
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
window.onload=function() {
//todo add js code here
}
</script>
</head>
<body>
<div id="AddIn"></div>
</body>
</html>
I can add the html
$('#AddIn').append("<div ng-app='dropboxApp' ng-controller='dropboxController as dropbox'>{{dropbox.label}}</div>");
but I am not sure where to add my angular init code, and get things working
angular.module('dropboxApp', [])
.controller('dropboxController', function () {
var dropbox = this;
dropbox.label = 'hello angular';
});
You could lazily initialize your app on the page instead of using ng-app directive on page. After you html injection you could initialize angular on your page using angular.bootstrap method basically which takes DOM & then inside array it needs module name.
While doing this you need to add your all the angular component files on the page itself after angular reference. They should be initialized before you bootstrap the app on the page.
window.onload=function() {
$('#AddIn').append("<div ng-controller='dropboxController as dropbox'>{{dropbox.label}}</div>");
//add angular html first
//then run angular on the page using angular.bootstrap.
angular.bootstrap($('#AddIn'), ['demo']);
}
Note: Load jQuery before angular to get jQuery compiled DOM instead of get jQLite compiled DOM.
In addition to the Pankaj answer, you can use the Angular $window
$window.onload = function (){}
I have this current app.js
angular.module('app', ['ngRoute', 'ngSanitize', 'ui.bootstrap','ui.router', 'com.2fdevs.videogular', 'com.2fdevs.videogular.plugins.controls', 'com.2fdevs.videogular.plugins.overlayplay',
'com.2fdevs.videogular.plugins.poster', 'com.2fdevs.videogular.plugins.buffering', 'ngDraggable','angular-loading-bar', 'chart.js', 'angularSpinner'])
and I include the needed javascript files in my index.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap-tpls.min.js"></script>
With this, the carousel is working at least, there is no transition animation, but if I click on the arrow it switches to the next one.
then I added the angular-animate to the index.html:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-animate.js"></script>
and ngAnimate to the app.js as dependency.
But this break the carousel. With this, the carousel won't go forward on its own and a click on the arrow will do nothing. I do not see any errors in the console and not at all why this is not working. Am I missing some css stuff or what?
May be a little late here, but there is a solution to this. Make a directive which essentially disables ng-animate:
app.directive('disableAnimation', function ($animate) {
return {
restrict: 'A',
link: function ($scope, $element, $attrs) {
$attrs.$observe('disableAnimation', function (value) {
$animate.enabled(!value, $element);
});
}
}
});
Then add attribute "disable-animation='true'" to your carousel tag. This solution was suggested by another user on a different question. I'm trying desperately to find him and give him the credit he deserves, I'll make an edit if I locate it.
I am challenged to AngularJS that but does not work occurred.
I've created a code that uses the directive.
However, when you use the templateUrl, it does not do what we want to do the operation.
In my code, I am assuming that the tag is replaced by the contents of header.html. However, you can not.
Please lend your wisdom.
sample.html
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<script type="text/javascript">
var directiveApp = angular.module('dApp', []);
directiveApp.directive('header', [function () {
return {
restrict: 'E',
templateUrl: "header.html",
};
}]);
</script>
<body ng-app="dApp">
<header></header>
</body>
header.html
<label>Hello!</label>
With templateUrl in directive, angular will send a http request to retrieve this html from you server side. So you should make sure there is such 'header.html' file in the correct url.
However, if you don't want to load this template with a ajax. Then you can use the template in angular.
Add this to your sample.html:
<script type="text/ng-template" id="header.html">
<label>Hello!</label>
</script>
Hope this work for you.