I'm attempting to add an <object></object>into my html using a controller. When I load a <div> or a <p>, it works properly, but when I add an <object> it doesn't appear, nor do any custom attributes.
HTML:
<html ng-app="myAngularSite">
...
...
<div ng-controller="MyController">
<div id="myloader" ng-bind-html="myObject"></div>
</div>
JS:
var app = angular.module('myAngularSite', ['ngRoute']);
angular.module('myAngularSite', ['ngSanitize'])
.controller('MyController', ['$scope',function($scope) {
$scope.myObject =
'<object id="my_object" data="mysite.html" width="99.5%" height="400px" style="overflow:auto;border:3px ridge gray"/>';
}]);
How can I add the custom attributes and the object into my site? I noticed that attributes won't appear when I try to load a <div id"with_attribut></div> with attributes, although the divs appear by themselves.
Thanks!
The custom directive is probably the good solution, you can always add more custom behaviours. With ngBindHtml you will be limited. Here is link which can help you:
angular ng-bind-html and directive within it
Related
I am using node and angularjs. I have a frame like page inside an ejs that is passed content to load into the includes dynamically.
<div ng-app="thisApp">
<div ng-controller='MainCtrl'>
{{ firstMessage }}
<div id='contentFromNode' ng-include='<%= pageContent %>'></div>
</div>
</div>
<script>
var thisApp = angular.module('thisApp', []);
thisApp.controller('MainCtrl', [ '$scope', function($scope) {
$scope.firstMessage = "Main Controller Working Fine";
}])
</script>
and then the passed content might be just an html page containing something like this:
<div ng-controller='NestedCtrl' id='content-type-container'>
{{ nestedMessage }}
</div>
<script>
thisApp.controller('NestedCtrl', [function(){
var nested = this;
nested.nestedMessage = "Nested Won't Work";
}])
</script>
So I have tried $scope within the NestCtrl instead of referencing this, I have tried moving the script tag above and below (ideally this get separated eventually anyway). I have tried aliasing the controllers, however my problem is the in registration of the controller itself as I get that great Error: [$controller:ctrlreg] error. The page is loading the content fine? Any ideas what I am doing wrong here?
Seems JQlite doesn't support this. You have to include jquery or lazy load the script. Refer
AngularJS: How to make angular load script inside ng-include?
First, ng-app should be to set the area where angular take place, right? Even if there is ng-controller tag outside ng-app, they should be omitted?
However, when I test on jsfiddle (link here), it seems this is not the case:
HTML
<div ng-app="myApp">
<div ng-controller="MyCtrl">
Hello, {{name}}!
<input ng-model="name">
</div>
</div><br><br>
<div class="not-inside-my-app">
<div ng-controller="MyCtrl">
...... Some Many other content in real case that I don't want angular to touch .......<br>
So this is to test angular is not working here.<br>
Hello, {{name}}!
<input ng-model="name">
</div>
</div><br><br>
<div ng-app="myApp">
<div ng-controller="MyCtrl2">
Hello, {{name}}!
<input ng-model="name">
</div>
</div>
Javascript
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', MyCtrlFunction]);
function MyCtrlFunction($scope) {
$scope.name = 'Superhero';
}
myApp.controller('MyCtrl2', ['$scope', MyCtrlFunction2]);
function MyCtrlFunction2($scope) {
$scope.name = 'Non-superhero';
}
The angular code is still working in the middle div. Is my concept on ng-app wrong? Or what have I missed to limit the scope?
P.S. I know I can control the scope by using ng-controller, but it seems to be a waste on resource to do scanning on sections that I know I don't need angularJS.
Since ng-app attribute added to body tag, which is why all controllers are running.
Since angular considers first ng-app attribute and ignore other ng-app attributes. The above code is working.
NOTE: Though the code written in the html section didn't contain the body tag. You can able to insert the body tag by clicking on the gear icon in the html section of fiddle site. Which is what the main cause for this addition of ng-app attribute added to body tag. Thanks for pointing it out Durga
remove body tag <body ng-app="myApp"> from html section, there is no issue with jsfiddle.
It seems some issue with JS jsFiddle, try to run the same example in you local machine it will not work or here you get the answer:
https://www.w3schools.com/code/tryit.asp?filename=FEYVPGYHZAY5
New to Angular and need some assistance.
I have a block of HTML content that will be coming from a database that will contain a group of widgets. These are simple widgets that will essentially render out various elements, but for the purposes of this question we'll assume they're all basic HTML inside.
Those widgets are included in an unpredictable way, so my first thought was to use directives to render the HTML. So, we'd have something like:
<div widget data="This is the content."></div>
So I've got a directive that will place the value of data into the div. Easy enough!
Now, how would I go about nesting those widgets? So, how would I get something like:
<div widget data="Welcome! ">
<div widget data="This is some inside content."></div>
</div>
to render out:
Welcome! This is some inside content.
... because the issue I'm noticing is that if I place anything inside the directive HTML, it essentially gets ignored since it gets replaced with its own result (thus only echoing out Welcome!).
I realize I may be going the wrong direction on this in the first place, so any insight would be greatly appreciated. Thanks so much!
This is where you need to use the transclusion feature of the directive combined with ng-transclude directive.
Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.
Any existing content of the element that this directive is placed on will be removed before the transcluded content is inserted.
A very basic version of transclusion of content based on your example might look something like this:
.directive('widget', function() {
return {
transclude: true,//Set transclusion
template: '{{text}} <section ng-transclude></section>', <!-- set where you need to present the transcluded content -->
scope: {
text: "#"
}
}
});
Demo
angular.module('app', []).directive('widget', function() {
return {
transclude: true,
template: '{{text}} <section ng-transclude></section>',
scope: {
text: "#"
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<span widget data-text="Welcome! ">
<div widget data-text="This is some inside content.">
<span widget data-text="This is some inside inside content."></span>
</div>
</span>
</div>
I'm using Angular JS to dynamically load content like so:
HTML
...
<div ng-controller="MainController">
<div ng-view></div>
</div>
</html>
Angular
(function(){
var app = angular.module('app', ['ngRoute', 'ngAnimate']);
app.config(function($routeProvider) {
$routeProvider.when('/test', {
templateUrl : 'views/test.html',
controller : 'MainController'
});
});
app.controller('MainController', function($scope){ });
})();
This works as expected. However, inside the file test.html I have some links with the href="#" that need to be handled with javascript to do various things. At the moment, Angular is interpreting them with it's routing method and treats them as links to the homepage. How do I stop this and treat the links the way I want?
Example test.html content:
Left
Right
<p>Test content</p>
In a JS file separate from Angular I tried:
$('.slideLeft').on('click',function(){
return false;
});
But it doesn't do the return false, it uses the Angular routing.
You should be using Angular for all your bindings including event bindings. Don't use .on('click'), use ng-click (or .bind if you really need it, but you probably don't).
You can also see from the docs that the <a> directive does nothing if href is empty. Use href="" rather than href="#"
Use href="javascript:void(0)" in anchor attribute and also you should use ngClick instead of binding element using jQuery.
I am trying to use Waypoints inside a scrollable AngularJS view, however it's not working. I am trying to use ui.utils jQuery Passthrough but nothing happens. Here's what I have so far:
<body>
<div id="wrapper">
<div id="nav-menu">
<...>
</div>
<div id="main" class="main">
<div ng-view></div>
</div>
</div>
</body>
I am using the following template for the view:
<div class="fullScreenImage"></div>
<div ui-jq="waypoint" ui-options="test">test</div>
and my controller looks something like this:
app.controller('myController', ['$scope',
function ($scope) {
$scope.test = function(){
alert('You have scrolled to an entry.');
}}]);
My main element is scrollable but the window is not. Setting passthrough to the main div will trigger the test function, however I need it inside the template. Any suggestions?
Providing a JSFiddle or plunkr would be helpful.
But I suppose the issue is because the template is inside ngView.
As the content of the template is placed inside the ngView via XHR, the waypoints needs to be refreshed as discussed in the link http://imakewebthings.com/jquery-waypoints/#doc-refresh
An Angular directive will be more effective IMHO.
I had trouble with waypoints nested in ng-views as well.
My solution was just to wait till after the view had loaded to bind the waypoints, for this you can use $viewContentLoaded.
E.g.
myApp.run(['$rootScope', function($rootScope) {
$rootScope.$on('$viewContentLoaded', function(){
var waypoint = new Waypoint({
element: document.getElementById('waypoint'),
handler: function(direction) {
console.log('Scrolled to waypoint!')
}
})
});
}]);
I had the same problem. It's also possible to delay the binding with $timeout e.g $timeout(addWaypoints());.