So in Angular i'm trying to do
$scope.data = "<script> alert('hi'); </script>";
But unfortunately that doesn't work. I also tried to add ng-bind-html but without any results.
{{data}}
also I tried to load data in a script tag but that also seems not to work. Is there a way to avoid this all? For example
$scope.data = "bob";
-
<script>
var name = {{data}};
</script>
You could create a directive that will load the script into DOM dynamically.
Markup
<load-script ng-if="data" data="data"></load-script>
Directive
app.directive('loadScript', function($compile){
return {
restrict: 'E',
scope: {
'data': '='
},
link: function(scope, element, attrs){
element.append($compile(scope.data)(scope))
}
}
})
Working Plunkr
Your $scope will be already either within a <script> block or in a Javascript file.
Now, when/how do you want the alert to be called? If I understand correctly what you're trying to do, here's how to do it:
<div ng-click="doAlert()">
Click here to see an alert
</div>
and in your controller:
$scope.doAlert = function() {
alert('hi);
};
Related
I have a directive coming in from a database. Similar to how shortcodes work in Wordpress, the user needs to be able to insert these custom galleries here and there. I've tried several, several ways. They compile but they do not affect the HTML on the page. What am I missing?
Incoming from database:
<p>Lorem Ipsum. Some content here</p>
<div work-gallery friendly="bq"></div>
I would like to replace that DIV with the "work-gallery" attribute with a template. When I load that content into the scope of my page, I compile it so my directive triggers.
From controller
$compile($scope.page.content)($scope);
This triggers the directive, it compiles right up to where it needs to append it or replace it and then just doesn't show up on the frontend. If I add that DIV outside of the dynamically loaded content, it works.
Directive
app.directive('workGallery', function ($compile) {
var template = '<div>TEST{{page.med.length}}</div>';
return {
restrict: 'A',
replace: true,
link: function (scope, ele, attrs) {
scope.page.med = [1, 2];
scope.$watch(attrs.friendly, function () {
ele.html(template);
$compile(ele.contents())(scope);
console.log(ele);
ele.append(ele.contents());
});
}
};
});
Inspecting "element" reveals TEST2 if I dig through down to innerText but that's all I get. Any help is appreciated! From what I understand, this should add "TEST2" within my content.
Expected Output
<p>Lorem Ipsum. Some content here</p>
<div work-gallery friendly="bq">TEST2</div>
Any help is appreciated!
i think there is something wrong about watching an attribute, try:
attrs.$observe('friendly', function(val){
/* .... */
});
I want to make a simple directive that has a button that will show if the cursor is placed over it. However, every time I include this new directive into my index.html I receive this error in return.
Here is the following error:
Error shown on console
Here is my template code:
<div>
<button ng-show="ishovering">DELETE</button>
</div>
Here is my directive code:
app.directive('deleteArea',function(){
return {
scope: {},
require: 'ng-show',
restrict: "AE",
replace: true,
templateUrl: "./templates/delete.html",
link: function(scope,elem,attrs){
elem.bind('mouseover',function(){
elem.css('cursor','pointer');
scope.$apply(function(){
scope.ishovering = true;
});
});
}
};
});
Any help is appreciated, thank you.
Just use bootstrap for angular called ui.bootstrap .
Use the popover directive that will give you the effect you need.
I have the following angularJS controller and directive:
angular.module('twitterApp', [])
.controller('AppCtrl', AppCtrl)
.directive('enter', EnterFunc);
function AppCtrl($scope) {
$scope.loadMoreTweets = function() {
alert('loading more tweets!');
}
}
function EnterFunc() {
return function(scope, element, attrs) {
element.bind('click', function() {
scope.loadMoreTweets();
});
}
}
And the following HTML
<body ng-app="twitterApp">
<div class="container" ng-controller="AppCtrl">
<div enter>
Roll over to load more tweets
</div>
</div>
</body>
Now, this works perfectly, since all I'm doing is accessing the controller's scope from a directive. However, I'm trying to adapt my controller to bind variables to the "this" scope so I can use the "controller as" syntax on the html to make it easier to read, however, when I change my controller function to the following:
function AppCtrl() {
var vm = this;
vm.loadMoreTweets = function() {
alert('loading more tweets!');
}
}
My example stops working and upon clicking on the directive I get the following error:
Uncaught TypeError: scope.loadMoreTweets is not a function
Can someone explain how to get this directive to work without going back to binding to $scope? Here is the Plunkr for the not/working "Controller As" version:
http://plnkr.co/edit/PyIA4HVOMLn0KNJ5V2bc?p=info
I fixed it for now, but posting my solution in case other people stumble upon this. To fix this, instead of using "scope.loadMoreTweets()" on my directive, I used "scope.ctrl.loadMoreTweets()". Even tough this works, I'm not very happy that there isn't a way to access the parent scope without the ".ctrl" since ".$parent" didn't work either. If someone has a better solution please let me know. There should be more documentation on using directives with Controller's Controller As syntax.
I have modified your code to pass a reference to which controller's scope you want to pass to the directive. Then you can call the method on the reference. See if this works for you
Directive:
function EnterFunc() {
return {
restrict: 'A',
scope: {
controller: '='
},
link: link
}
function link(scope, element, attrs) {
element.bind('click', function() {
//scope.$apply(attrs.action);
scope.controller.loadMoreTweets();
});
}
}
HTML:
<body ng-app="twitterApp">
<div class="container" ng-controller="AppCtrl as ctrl">
<div enter controller="ctrl">
Roll over to load more tweets
</div>
</div>
Hi I am using one small directive for hide and show bootstrap modal from controller which was working fine when i was not using ngAnimate. But after inclusing ngAnimate it shows
element.modal is not a function
below is my directive
app.directive('akModal', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch(attrs.akModal, function(value) {
if (value) element.modal('show');
else element.modal('hide');
});
}
};
});
any fixes?
Managed to do it myself.
actually we should load bootsrap.js befor NGAnimate to avoid clashes.
Reason:
element.modal function is created in bootsrap.js so it should be loaded in order to use it afterwards.
I have a directive that i want to include multiple times on a page.
I also want to control this directive from the parent controller.
To give an example, the directive is a modal has a transcluded partial in it. This partial has a form that sends a message.
I want to dictate what that form does from my parent controller however when i isolate the scope (so that i can have more than one of these directives per page) i can no longer access the form object that angular creates.
im open to suggestions
html page
<page controller="pageCtrl">
<modal partial="/path/to/partial1"></modal>
<modal partial="/path/to/partial2"></modal>
</page>
html partial 1&2
partial1.html
<form name="formName1"></form>
partial2.html
<form name="formName1"></form>
JS
app.directive('modal', function(){
return {
restrict: 'AE',
transclude: true,
replace: true,
scope:true,
templateUrl: '/path/to/modal.html',
link:function($scope, elem, attrs){
$http.get(attrs.partial, { cache: $templateCache })
.success(function(response) {
element.find('[ng-transclude]').append(response);
$compile(element.find('[ng-transclude]').contents())($scope);
});
}
}
});
app.controler('pageCtrl', function(){
$scope.submitForm1 = function(data){
if($scope.formName1.$valid){
//DO SOMETHING
}
}
})
OK so after typing it all out i realized how to do such a thing.
My goal was to isolate the scope of the directive but not the scope of the form inside.
So all i had to do was change what scope my included form/modal content was compiling against;
$compile(element.find('[ng-transclude]').contents())($scope.$parent);
Instead of;
$compile(element.find('[ng-transclude]').contents())($scope);
Thanks anyway
-James Harrington