Sorry, this seems a duplicated questions, but I tried all answered questions close to my question, with no success.
I am trying to introduce angular.js into a legacy system.
the system is using the .load jquery function to dynamically load div content with a page from an ASP.NET MVC page.
my brief html will look like this
<body ng-app="myApp">
<div ng-controller="myCtrl">
any content...
<div id="dyncontent"> </div>
</div>
and my javascript legacy code looks like
$('#dyncontent').load('/showviewcontent');
I added in the dynamic content, some angular directive and binding instruction
my angular code is like this
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function ($scope) {
.....
});
How to make the binding / angular directive works on the newly added content?
You need to manually start the angular module using angular.bootstrap
$('#dyncontent').load('/showviewcontent', function() {
angular.bootstrap(document.getElementById('dyncontent'), ['myApp']);
});
Related
I am really new to AngularJS. So this question might be very basic but I don't get a clear answer from other post so I try to ask a new question.
I am woundering why angulars js ng-bind-html removes all script tags from the content I want to paste in my website.
I just try it with this code example from AngularJS documentation website which shows a simple bind-html example with a java script tag inside.
(function(angular) {
'use strict';
angular.module('bindHtml', ['ngSanitize'])
.controller('Controller', ['$scope', function($scope) {
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>'+
'<script type="javascript">' +
'alert(1);'+
'</script>';
}]);
})(window.angular);
This code snippet shows the html template:
<body ng-app="bindHtml">
<div ng-controller="Controller">
<p ng-bind-html="myHTML"></p>
</div>
</body>
But the Chrome Inspector shows that AngularJS apparently removed all java script without a warning message. Exist a way to bypass this removing or do I have to rewrite all old style jquery and what ever javascript into AngularJS?
Screenshot from code inspector of Chrome
Thank you
You need to inject $sce service into your controller or Directive etc. and use $sce service like this :-
$scope.myHTML= $sce.trustAsHtml("I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>'+
'<script type="javascript">' +
'alert(1);'+
'</script>");
And bind this in your HTML page e.g;
<body ng-app="bindHtml">
<div ng-controller="Controller">
<p ng-bind-html="myHTML"></p>
</div>
</body>
I'm still fighting with simple things in Angular. I have jQuery and Backbonejs background, so please do not yell on me. I try hard to understand differences
I have HTML in which from rails is given ID of project as data-project-id:
<div data-ng-controller="ProjectCtrl as ctrl" data-project-id="1" id="project_configuration">
Is there any chance to get access to this attribute? I need it to my API calls...
To access an elements attributes from a controller, inject $attrs into your controller function:
HTML
<div test="hello world" ng-controller="ctrl">
</div>
Script
app.controller('ctrl', function($attrs) {
alert($attrs.test); // alerts 'hello world'
});
In your example, if you want to get data-project-id:
$attrs.projectId
Or if you want to get id:
$attrs.id
Demo:
var app = angular.module('app',[]);
app.controller('ctrl', function($attrs) {
alert($attrs.test);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" test="hello world">
</div>
In Angular world you should use directives to manipulate with DOM elements. Here a nice explanation how to get attribute value from custom directive (How to get evaluated attributes inside a custom directive).
But if you still want to get it's value from controller you are able to use jQuery as well $('#project_configuration').data('project-id')
I have an ng-include which is bound to a scope variable.
I can change the included content dynamically through my own 'routing' system using this approach.
However angular animations are fired on enter and leave events and are not triggered simply when the binding changes for the ng-include.
what is the best approach to implementing this, some kind of custom directive that wraps the ng-include behaviour, or is there a simpler way to do this that I'm missing?
Here's the index html
<body ng-controller="MainCtrl">
<div ng-include="templateUrl" class="animation" ></div>
<br/><form>
<button ng-click="swapTemplate()">Swap</button>
</form>
</body>
and the controller code
$scope.templateUrl = 'page2.html';
$scope.swapTemplate = function() {
if($scope.templateUrl === 'page1.html'){
$scope.templateUrl = 'page2.html';
}
else {
$scope.templateUrl = 'page1.html';
}
}
And the plnk http://plnkr.co/edit/Oh1vKi0DCxj95qO1J23x
you need to add angular-animate.js file
<script data-require="angular-animate#*" data-semver="1.2.13" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-animate.js"></script>
add ngAnimate module in to main module
var app = angular.module('plunker', ['ngAnimate']);
here is the demo Plunker
I am trying to create a tooltip based from from this post
Angular-UI-Bootstrap custom tooltip/popover with 2-way data-binding
I successfully created the popup but I have trouble delivering the content to my popover.html
I added this to my script.js
var app = angular.module('myApp', ['ui.bootstrap', 'ian.bootstrap']);
app.controller('myCtrl', function ($scope) {
$scope.item = {
title: 'Original Title',
content:'content 1' //newly added item
};
$scope.text = 'Click me';
});
and I want to display it in my popover.html
<div class="popover-content">
{{item.content}}
</div>
It doesn't show anything. Can someone help me about it? thanks a lot!
my plunker
http://plnkr.co/edit/5pBZ9qq79OPl2tGEeYYV?p=preview
Here is your updated working Plunkr
Basically you have to pass the attr iantooltip-content with the binding of the content item, not the raw text, and after in the directive pass in the directive isolate scope options the binding of the content like :
iantooltipContent: '='
Just change the appenToBody variable and you're done.
You should read the docs for more infos about Angular directive :)
You can add the ng-controller in your div and then specify the controller name like so :
<div class="popover-content" ng-controller='myCtrl'>
{{item.content}}
</div>
Before the use cases, the basic syntax to create a custom directive.
For all the code samples in this page I started from the angular-seed template.
Starting from the angular-seed skeleton is quite easy to extract a model to begin to implement custom directives.
<html ngApp="myApp">
...
<div my-first-directive></div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/directives.js"></script>
...
</html>
I have some markup and loaded controllers.
Then I load some modal window contents by ajax, which is using one of controllers I have defined before. But looks like this controller isn't being used, because he is not required until modal loaded.
Question: How to make controller work when modal loaded? I tryied $scope.$digest(), got error "digest in progress".
index.html
<html data-ng-app="foo">
<head>
<script src="/js/app.js"></script>
</head>
<body>
<div id="modal"></div>
</body>
</html>
js/app.js
!(function(){
function FormCtrl($scope) {
console.log($scope); // never fired
$scope.Submit = function() {
console.log('submit'); // never fired too :C
}
}
angular.module('foo', []).controller('FormCtrl', FormCtrl);
})();
html content loaded by ajax and inserted to #modal
<div data-ng-controller="FormCtrl">
<form name="signup" data-ng-submit="Submit()">
<!-- form data -->
</form>
</div>
SOLUTION:
$.modal().open({
onOpen: function($e) {
$http.get('/views/' + url).success(function(data) {
$compile(data)($scope, function(clonedElem) {
$e.html(clonedElem);
});
// $e.html(data); was used instead of statement above
});
}
});
If you want to inject new DOM elements into existing Anuglar app. You options are to use
ng-include: This has a src property that takes the url from which partial content has to be loaded. AngularJS would internally compile it. One important thing here is that angular will download the template as soon it encounter ng-include in html.
Download and compile DOM manually using the $compile service which is a more involved process.
If your AJAX content contains a controller defined in ng-controller, AngularJS would create it for you.
But in any case, keep in mind the controller script should have been already wired at the initialization\setup phase.