Previously there was a <div>, the contents of which i was toggling on ng-click. With components in Angular 1.5, i moved the contents of the <div>and created a component. I want to load this component on ng-click now.
Is this possible ?
I did not find any help yet. If possible, a help would be great.
Its possible to show/hide the component (having your div content). I have created a plnkr, refer the below code and plnkr link
https://plnkr.co/edit/sZSfslXTDGfvGwiDdBSZ?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="componentApp">
<head>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="componentController">
<button ng-click="showComponent()" id="changeText">Show Component</button>
<div-content ng-if="isShowContent"></div-content>
</body>
</html>
JS:
angular.module("componentApp", [])
.controller("componentController", function($scope) {
$scope.isShowContent = false;
$scope.showComponent = function() {
$scope.isShowContent = !$scope.isShowContent;
document.getElementById("changeText").innerHTML = $scope.isShowContent ? "Hide Component" : "Show Component";
};
})
.component("divContent", {
template: "This is the content of my div"
});
Related
Newbie to AngularJS. Trying to display a message from controller onto the html page but it does not show. I'm using AngularJS version 1.6.0 and I binded the controller to the body tag. What am I missing?
/// HTML
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="4.0.0"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
// script.js file contents
var app = angular.module('app', []);
app.MainController('MainController', function($scope) {
$scope.message = "Hello, Angular!";
});
Thank you.
Since you are using the version 1.6 , declaration of global controller is not supported, you need to have a module as well.
DEMO
var app = angular.module('testApp',[])
app.controller('MainController',function($scope) {
$scope.message = "Hello, Angular!";
});
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="4.0.0"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
do you need to pass the name of your app on the ng-app tag.
Like this:
<html ng-app="your-app">
So Angular understand where it comes.
So, an advice to you is using the controllerAs syntax over the classic controller with $scope syntax.
Like this:
JS file:
var app = angular.module('testApp',[])
app.controller('MainController',function($scope) {
var vm = this; // view model
vm.message = "Hello, Angular!";
});
HTML file:
<body ng-controller="MainController as mainCtrl">
<!-- or any other name, your choice -->
<h1>{{mainCtrl.message}}</h1>
</body>
Why?: Controllers are constructed, "newed" up, and provide a single
new instance, and the controllerAs syntax is closer to that of a
JavaScript constructor than the classic $scope syntax.
Why?: It promotes the use of binding to a "dotted" object in the View
(e.g. customer.name instead of name), which is more contextual, easier
to read, and avoids any reference issues that may occur without
"dotting".
Why?: Helps avoid using $parent calls in Views with nested controllers
https://github.com/johnpapa/angular-styleguide/tree/master/a1#controlleras-view-syntax
I hope this helps you
I am trying to run this program and I see no output. Can you please let me know what I am missing here. Thanks in advance.
<html>
<head ng-app="myApp">
<title>Test</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>
<div my-directive my-url="http://www.google.com" my-click="Click me">
</div>
</body>
<script>
angular.module('myApp',[]).directive('myDirective',function()
{
return
{
restrict : 'AE',
replace : true,
scope :
{
myURL :'#',
myClick : '#'
},
template : '{{myLinkText}}'
};
});
</script>
</html>
It looks like you placed the root of your Angular app in the header and not in the body.
Change the location of the ng-app="myApp" attribute from the head to the body or html elements
<html ng-app="myApp"> <!-- new location -->
<head > <!-- ng-app="myApp" it was here -->
<title>Test</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
In the directive {{myLinkText}} does not exists, it should be renamed for {{myClick}}
some how by spending whole day i am able to display the text and able to click it but failing to redirect to the mentioned URL,i am getting error in console like Refused to display 'https://www.google.co.in/?gfe_rd=cr&ei=kepTWNDiIvLI8Afnp4HIBg' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.you can found the same here in console
It works normally, but doesn't work after an ngClick.
Why is this?
How should this be dealt with if you do want it to work after an ngClick?
It actually works in the snippet below, but doesn't work in this Plunker, and also doesn't work in my app.
It also never works more than once in any of the three places, and I don't know why that is.
angular
.module('app', ['ui.bootstrap'])
.controller('MainController', MainController)
;
function MainController() {
var vm = this;
vm.updateSuccess = false;
vm.closeUpdateSuccess = function() {
console.log('closeUpdateSuccess');
vm.updateSuccess = false;
};
vm.submit = function() {
vm.updateSuccess = true;
};
}
<!DOCTYPE html>
<html ng-app='app'>
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="ui-bootstrap#0.13.3" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js'></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller='MainController as vm'>
<alert ng-show='vm.updateSuccess' type='success' close='vm.closeUpdateSuccess()' dismiss-on-timeout='2000'>
Successfully updated!
</alert>
<h1>Test Text</h1>
<button ng-click='vm.submit()'>Submit</button>
</div>
</body>
</html>
The problem is you are not using the alert directive correctly. It is working as designed and you can see this by looking at the console in your browser. When the page is rendered, two seconds later your logging statement is executed. The alert directive doesn't know or care whether or not it is visible. Angular will execute the directive when it is added to the DOM. For ng-show as you are using, it is only ever added once. You could use ng-if to achieve the desired behavior or, as I say below, ng-repeat if you want the ability to display multiple alerts.
Look at our examples here and see how we're using an array to store them and the HTML code to display them via an ng-repeat.
your are using angular-ui but you are trying to execute native javascript function, try to use the angular in your js file.1 So you need to implement it with so that directive could call it,
<alert type="danger" close='closeUpdateSuccess()' ng-if="show"
dismiss-on-timeout="2000">Something happened.</alert>
and in controller:
$scope.show = true;
$scope.closeUpdateSuccess() = function(index) {
$scope.show = false;
};
I'm using ng-bind-html to put up some HTML content on my site. The problem is if the content has links, the links open in the same window when clicked. How can I make it open in a new window?
<div ng-bind-html="currentElement.content"></div>
links contained in your currentElement.content should have the attribute target='_blank'
MyLink
if the html content comes from an external source, you could add a filter that parses the html content and adds the target attribute to links
this is a sketch:
return angular.element(htmlContent).find('a').attr('target', '_blank');
more in details
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular-sanitize#*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="test" ng-controller="HomeCtrl">
<h1>Test </h1>
<div ng-bind-html="myHtml | addTargetBlank"></div>
</body>
</html>
//script.js
angular.module('test', ['ngSanitize'])
.filter('addTargetBlank', function(){
return function(x) {
var tree = angular.element('<div>'+x+'</div>');//defensively wrap in a div to avoid 'invalid html' exception
tree.find('a').attr('target', '_blank'); //manipulate the parse tree
return angular.element('<div>').append(tree).html(); //trick to have a string representation
}
})
.controller('HomeCtrl', function($scope){
$scope.myHtml = 'test html content 1 click here, test html content 2 click here, test html content 3 click here';
})
;
http://plnkr.co/edit/tpl:JHcBgtJ75fVaqFYQlE4a
I am attempting to implement the Kendo UI Editor with Angular, per the example on their demos website. So far it works pretty well;
kendo ui demos
This is what I have so far, but the problem I am having is actually rendering a fully parsed preview of the contents of the editor. When I use ng-bind-html, it works when the page first loads, but then any subsequent edits have HTML peppered into it. I thought the answer would be to use kendo.htmlEncode, but that isn't working either. I'm not quite getting the hang of this like I thought I would...
I have prepared a jsBin to show what is going wrong, as well as posted my code here for review.
jsBin
app.js
(function(){
var app = angular.module("kendoDemos", [ 'kendo.directives', 'ngSanitize' ]);
app.controller('EditorController', function($scope, $sce){
$scope.html = "<h1>Kendo Editor</h1>\n\n" +
"<p>Note that 'change' is triggered when the editor loses focus.\n" +
"<br /> That's when the Angular scope gets updated.</p>";
});
app.directive('kendoHtml', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
return element.html(kendo.htmlEncode(scope[attrs.kendoHtml]));
}
};
});
})();
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/kendo.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular.sanitize.js"></script>
<script type="text/javascript" src="js/kendo.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-app="kendoDemos">
<div ng-controller="EditorController" class="container">
<h2>Kendo Editor</h2>
<textarea kendo-editor ng-model="html"></textarea>
<h3>Kendo Editor Preview</h3>
<blockquote kendo-html="html"></blockquote>
</div>
</div>
</body>
</html>
You need to do two things:
Prevent the editor from encoding its value.
<textarea kendo-editor ng-model="html" k-encoded="false"></textarea>
Avoid using kendo.htmlEncode because it will encode it one more time.
scope.$watch(attrs.kendoHtml, function() {
element.html(scope[attrs.kendoHtml]);
});
Here is the updated jsbin: http://jsbin.com/bibecima/1/edit
You can also use ng-bind-html to avoid the need of a custom directive: http://jsbin.com/kamenoju/1/edit. It will work as expected once you set the encoded option to false.