I'm trying to automatically create an instance of 'loadPlugCtrl'
as may times as directive is used, but it's not working. You can see it's
printing the same label twice where as they should be different.
One more thing I noticed that in directive the command
console.log(ctrlInstName);
is getting executed only once. I have no idea what's happening here.
// Code goes here
angular.module('plunker', ['loadPlugin']);
function randomString(length) {
chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var result = '';
for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
return result;
}
angular.module('loadPlugin', [])
.directive("loadPlugin", ['$compile', function($compile){
var ctrlInstName = "loadPluginCtrl_" + randomString(8);
console.log(ctrlInstName);
return{
restrict: 'E',
replace: true,
controller: "loadPluginCtrl",
controllerAs:ctrlInstName,
link: function(scope, element, attrs) {
scope.label = randomString(attrs.plug);
var template = '<p>{{label}}</p>';
var linkFn = $compile(template);
var content = linkFn(scope);
element.append(content);
} // End link
}; // End return
}])
.controller("loadPluginCtrl", ['$scope', function($scope) {
// This controller should be instantiated as many times
// as the directive is used in HTML.
}]);
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
<script data-require="angular.js#1.6.x" src="https://code.angularjs.org/1.6.4/angular.js" data-semver="1.6.4"></script>
<script src="script.js"></script>
</head>
<body>
<p>Test</p>
<load-plugin plug="15"></load-plugin>
<load-plugin plug="20"></load-plugin>
</body>
</html>
Let me explain you guys, what actually I am trying to do.
I have n number of form templates stored on server along with their data in
database. All most all of the features required to handle forms has been written in a controller. Let's say it's a base controller for all of them.
Load the form template dynamically along with it's data using GET service.
Automatically assign base controller's instance to it.
I am aware of the face that Angular is designed for SPA but my requirement is more of website like. I was wrong when thought I could achieve this using directive.
I would be glad if some one point me the right direction to do.
A controller is instantiated each time when a directive is compiled, this is what it is for.
The problem is that you picked the wrong way to test this. Directive factory function is executed only once. That's why ctrlInstName never changes. All controller-specific code should be put to controller.
Dynamic controllerAs property is not possible and is a design mistake.
Each instance of directive will create a new controller instance.... but there is only one registration of the directive itself within the module
If you use controllerAs you want to assign values to the controller object not $scope and there is no benefit in creating a dynamic controller alias name:
angular.module('loadPlugin', [])
.directive("loadPlugin", ['$compile', function($compile) {
return {
restrict: 'E',
replace: true,
controller: "loadPluginCtrl",
//scope: {},
template: '<p>{{$ctrl.label}}</p>',
controllerAs: '$ctrl',
link: function(scope, element, attrs, ctrl) {
ctrl.label = randomString(attrs.plug);
} // End link
}; // End return
}])
.controller("loadPluginCtrl", ['$scope', function($scope) {
var vm = this;
// demonstrate that each use creates own instance of controller
$scope.$watch(function(){
return vm.label;
}, function(nVal) {
if (nVal) {
console.log('Label for this instance is:', nVal)
}
})
}]);
DEMO
Related
I'm trying to sanitize the content of some text areas, I cannot use ng-bind-html because it breaks two way binding (ng-model does not work at the same time)
Strangely when I apply ng-bind-html to a model it produces a different result to when I use $sanitize or $sce inside of a directive.
Here's a sample I made up
http://plnkr.co/edit/iRvK4med8T9Xqs22BkOe?p=preview
First text area uses ng-bind-html, the second uses $sanitize and the third should be the code for the ng-bind-html directive as I ripped out of the AngularJS source code.
" is only corrected changed to " when using ng-bind-html, in the other two examples it changes to "
How can I replicate the results of ng-bind-html in my directive - while keeping the two way binding?
angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', '$sce',
function($scope, $sce) {
$scope.value = 'This in "quotes" for testing';
$scope.model = 'This in "quotes" for testing';
}
]).directive('sanitize', ['$sanitize', '$parse', '$sce',
function($sanitize, $parse, $sce) {
return {
restrict: 'A',
replace: true,
scope: true,
link: function(scope, element, attrs) {
var process = function(input) {
return $sanitize(input);
//return $sce.getTrustedHtml(input);
};
var processed = process(scope.model);
console.log(processed); // Output here = This in "quotes" for testing
$parse(attrs.ngModel).assign(scope, processed);
//element.html(processed);
}
};
}
])
.directive('sanitizeBindHtml', ['$parse', '$sce',
function($parse, $sce) {
return {
restrict: 'A',
replace: true,
scope: true,
link: function(scope, element, attrs) {
var parsed = $parse(attrs.ngModel);
function getStringValue() {
var value = parsed(scope);
getStringValue.$$unwatch = parsed.$$unwatch;
return (value || '').toString();
}
scope.$watch(getStringValue, function ngBindHtmlWatchAction(value) {
var processed = $sce.getTrustedHtml(parsed(scope)) || '';
$parse(attrs.ngModel).assign(scope, processed)
});
}
};
}
]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.js"></script>
<!doctype html>
<html lang="en">
<body ng-app="sanitizeExample">
<div ng-controller="ExampleController">
<textarea ng-bind-html="value"></textarea>
<br/>{{value}}
<br/>
<br/>
<textarea sanitize ng-model="model"></textarea>
<br/>
<br/>
<textarea sanitize-bind-html ng-model="model"></textarea>
</div>
</body>
It turns out like we would expect, the sanitation service is returning the same result. Placing a breakpoint inside the ngBindHtmlDirective, We can step in and see what is happening. We dive in and examine the values inside the $SanitizeProvider. The value of buf that will be returned back to the ngBindHtmlDirective is:
This in "quotes" for testing
The exact same as we get for calling $sanitize, so what's the real difference? The real difference is between a textbox's innerHTML and value. View this example plunker. You can see the difference between calling the two different methods, with the different ways of escaping a double quote. I didn't go digging though the w3 spec or the browser code, but I assume the innerHTML assignment is doing additional work under the hood of creating a documentFragment, grabbing it's textContent, then assigning that to the textbox's value. Obviously value is just grabbing the string and inserting it as is.
So what's the problem with your directives? I see that element.html(processed) is in a comment, but uncommenting it doesn't have an affect. Well the truth is that it does work for a split second! Stepping though with the debugger, the value of the textbox is correctly set, but then a $digest cycle gets fired and immediate changes it! The truth is the ngModelDirective is getting in the way, specifically it's the $render function of the baseInputType. We can see in the code it is using the element.val method.
How can we fix this in the directives? Require the ngModelController and override its $render function to use element.html method instead (example plunker).
// Add require to get the controller
require: 'ngModel',
// Controller is passed in as the 4th argument
link: function(scope, element, attrs, ngModelCtrl) {
// modify the $render function to process it as HTML
ngModelCtrl.$render = function() {
element.html(ngModelCtrl.$isEmpty(ngModelCtrl.$viewValue) ? '' : ngModelCtrl.$viewValue);
};
I am trying to create some Bootstrap modals dynamically using AngularJS, as described in here: https://angular-ui.github.io/bootstrap/
For that purpose, I have created a basic script template in AngularJS inside a view of a directive called modalView.html:
<script type="text/ng-template" **id="{{modalId}}.html"**>
<div class="modal-header">
Header
</div>
<div class="modal-body">
Body
</div>
<div class="modal-footer">
Footer
</div>
</script>
And this is my directive (modalDirective.js):
myDirectives.directive('modal', function () {
return {
restrict: 'A',
scope: {},
templateUrl: 'shared/controls/modal/modalView.html',
link: function (scope, element, attributes) {
scope.modalId = attributes['modalId'];
}
}
});
Then, I have another directive that uses the aforementioned directive alongside a textbox that should open the modal when the latter is clicked.
modalTextboxView.html:
<div modal modal-id="{{modalId}}"></div>
<div textbox is-read-only="true" ng-click="openModal()"></div>
modalTextboxDirective.js:
myDirectives.directive('modalTextbox', function ($modal, $log) {
return {
restrict: 'A',
scope: {},
templateUrl: 'shared/controls/modalTextbox/modalTextboxView.html',
link: function (scope, element, attributes) {
scope.modalId = attributes['fieldId'];
scope.openModal = function(modalSize) {
var modalInstance = $modal.open({
**templateUrl: scope.modalId + '.html',**
size: modalSize,
resolve: {
items: function () {
return scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
}
}
}
});
The html output is as expected. I can see that the script template id of the first view is being set correctly. However, when I click on the textbox I get an error 404. It seems that the modal is trying to be opened but can't find the templateUrl defined, which has been set correctly too. Moreover, if I just type the hardcoded value into the id field of the script template it works flawlessly and it opens the modal. Unfortunately, I need that id to be dynamic as I need to be able to create and generate an undetermined number of modals on my page.
Any ideas?
You can't use the <script type="text/ng-template"> approach to define a dynamically bound template id.
All that Angular is doing (see src) when it encounters this type of <script> tag is that it adds the contents into a $templateCache service with the uninterpolated value of the id attribute; and, in fact, it adds it at compile-time before it could be interpolated.
So, the template is added with a key of "{{modalId}}.html" - literally. And when you request it with templateUrl: "ID123.html", it results in a cache miss and an attempt to download from that non-existent URL.
So, what are you actually trying to get out of this "dynamic" modal URL?
I don't understand the use of your modal directive - all it attempts to do is to dynamically assign an id for the template. Why? If you just need to define N templates and dynamically switch between them, then just define N <script> tags inside your modalTextbox directive:
<script type="text/ng-template" id="modal-type-1">
template 1
</script>
<script type="text/ng-template" id="modal-type-2">
template 2
</script>
<div textbox is-read-only="true" ng-click="openModal()"></div>
and in the invocation of $modal, set templateUrl like so:
$modal.open({
templateUrl: "modal-type-" + scope.modalType,
// ...
});
Plnkr sample: [http://plnkr.co/edit/jlMQ66eBlzaNSd9ZqJ4m?p=preview][1]
This might not be the proper "Angular" way to accomplish this, but unfortunately I'm working with some 3rd party libraries that I have limited ability to change. I'm trying to dynamically create a angular directive and add it to the page. The process works, at least in the sense where the directive element gets added to the DOM, HOWEVER it is not actually executed - it is just a dumb DOM at this point.
The relevant code is below:
<div ng-app="myModule">
<div dr-test="Static Test Works"></div>
<div id="holder"></div>
<a href="#" onclick="addDirective('Dynamic test works')">Add Directive</a>
</div>
var myModule = angular.module('myModule', []);
myModule.directive('drTest', function () {
console.log("Directive factory was executed");
return {
restrict: 'A',
replace: true,
link: function postLink(scope, element, attrs) {
console.log("Directive was linked");
$(element).html(attrs.drTest);
}
}
});
function addDirective(text){
console.log("Dynamically adding directive");
angular.injector(['ng']).invoke(['$compile', '$rootScope',function(compile, rootScope){
var scope = rootScope.$new();
var result = compile("<div dr-test='"+text+"'></div>")(scope);
scope.$digest();
angular.element(document.getElementById("holder")).append(result);
}]);
}
</script>
While appending the directive to DOM you need to invoke with your module as well in the injector, because the directive drTest is available only under your module, so while creating the injector apart from adding ng add your module as well. And you don't really need to do a scope apply since the element is already compile with the scope. You can also remove the redundant $(element).
angular.injector(['ng', 'myModule']).invoke(['$compile', '$rootScope',function(compile, rootScope){
var scope = rootScope.$new();
var result = compile("<div dr-test='"+text+"'></div>")(scope);
angular.element(document.getElementById("holder")).append(result);
}]);
Demo
I am looking for a way to obtain an iframe contentWindow object and post a message to it after some action of the user. My current solution does not feel ok with angular at all (especially accessing the DOM from the controller).
I have created a plunker demonstrating the issue:
http://plnkr.co/edit/aXh4jydWGWfK3QQD4edd
Is the a more angular way to execute the postMessage?
controller:
app.controller('Main', function($scope) {
$scope.click = function() {
var iframe = document.getElementById("inner").contentWindow;
iframe.postMessage("Hello iframe", '*');
}
});
html:
<body ng-controller="Main">
<button ng-click="click()">send message</button>
<iframe id="inner" src="inner.html"/>
</body>
I realize your question is over a year old at this point but I've recently had a similar need so I thought I'd post my solution. Originally I had something like you posted but as you pointed out this doesn't feel very "Angular". It's also not easily testable which I supposed is also not very "Angular".
Instead I've refactored my code to implement the iframe as a directive. I then $broadcast() events from my app's controllers and have the directive listen for them. This code can probably be improved quite a bit but it's feels a little more "Angular" and avoids directly touching the DOM.
'use strict';
angular.module('app')
.directive('angularIframe', ['$rootScope', function($rootScope) {
return {
restrict: 'E',
replace: true,
template: '<iframe id="game" src="/iframe/index.html" width="100%" height="100%" frameboarder="0" scrolling="no"></iframe>',
link: function(scope, elem) {
var off = $rootScope.$on('app.postmessage', function(ev, data, targetOrigin) {
var str = JSON.stringify(data);
targetOrigin = targetOrigin || '*';
elem[0].contentWindow.postMessage(str, targetOrigin);
});
// See: http://stackoverflow.com/a/14898795/608884
elem.on('$destroy', function() {
off();
});
}
};
}]);
You can then use this directive by adding <game></game> somewhere in your application.
In a controller you can now broadcast the app.postmessage event along with some data to invoke postMessage() on the iframe:
var myData = { foo: 'bar' };
$rootScope.$broadcast('app.postmessage', myData);
If you are working with Angular, probably you will have case where you want to call some JQUERY library to do something for you. The usual way would be to call JQUERY function on page ready:
$(function(){
$(element).someJqueryFunction();
});
If your element content is dynamically added using Angular, than this approach is not good as I understood, and you need to create an custom directive in order to fulfill this functionality.
In my case, I want to load bxSlider on <ul class="bxslider"> element, but content of the <ul> element should be loaded using angular ng-repeat directive.
Picture names are collected using REST service from the database.
I call my directive called startslider using the following code:
<div startslider></div>
My custom Angular directive is: (pictures is variable in the $scope passed from my controller, which called REST service)
application.directive('startslider', function () {
return {
restrict: 'A',
replace: false,
template: '<ul class="bxslider">' +
'<li ng-repeat="picture in pictures">' +
'<img ng-src="{{siteURL}}/slide/{{picture.gallery_source}}" alt="" />'
'</li>' +
'</ul>',
link: function (scope, elm, attrs) {//from angular documentation, the link: function should be called in order to change/update the dom elements
elm.ready(function () {
elm.bxSlider({
mode: 'fade',
autoControls: true,
slideWidth: 360,
slideHeight:600
});
});
}
};
});
As result, I get all the pictures from the database displayed on my screen, but without bxSlider loaded (all pictures displayed one bellow other).
Please note that bxSlider is working, because when I call $(element).bxSlider(); on manually written code, the slider loads.
Why is this happening?
EDIT:
I think your problem is caused by trying to call the slider on HTMLUListElement, which is an object.
To call the slider on the DOM element, you could use $("." + $(elm[0]).attr('class')) that will use the existing bxslider class, or better assign an id to your <div startslider id="slideshow"></div> and call like $("." + $(elm[0]).attr('id'))
elm.ready(function() {
$("." + $(elm[0]).attr('class')).bxSlider({
mode: 'fade',
autoControls: true,
slideWidth: 360,
slideHeight:600
});
});
Full code:
http://jsfiddle.net/z27fJ/
Not my solution, but I'd thought I would pass it along.
I like this solution the best (Utilizes directive controllers)
// slightly modified from jsfiddle
// bxSlider directive
controller: function() {},
link: function (scope, element, attrs, controller) {
controller.initialize = function() {
element.bxSlider(BX_SLIDER_OPTIONS);
};
}
// bxSliderItem directive
require: '^bxSlider',
link: function(scope, element, attrs, controller) {
if (scope.$last) {
controller.initialize();
}
}
http://jsfiddle.net/CaioToOn/Q5AcH/8/
Alternate, similar solution, using events (I do not like)
Jquery bxslider not working + Angular js ng-repeat issue
Root issue
You cannot call scope.$apply in the middle of a digest cycle.
You cannot fire bxSlider() until the template gets compiled.
Ultimately, you need to wait for the template to be compiled and available before calling bxSlider()
Calling a function when ng-repeat has finished
this is the directive
.directive('slideit', function () {
return function (scope, elm, attrs) {
var t = scope.$sliderData;
scope.$watch(attrs.slideit, function (t) {
var html = '';
for (var i = 0; i <= t.length-1; i++) {
html += '<li><ul class="BXslider"><li class="BXsliderHead"><img src="'+scope.$imageUrl+'flight/'+t[i].code+'.gif" />'+t[i].name+'</li><li class="BXsliderChild">'+t[i].noneStop+'</li><li class="BXsliderChild">'+t[i].oneStop+'</li><li class="BXsliderChild">'+t[i].twoStop+'</li></ul></li>';
}
angular.element(document).ready(function () {
$("#" + $(elm[0]).attr('id')).html(html).bxSlider({
pager:false,
minSlides: 3,
maxSlides: 7,
slideWidth: 110,
infiniteLoop: false,
hideControlOnEnd: true,
auto: false,
});
});
});
};
});
this is the html in view
<div ui-if="$sliderData">
<ul id="experimental" slideit="$sliderData"></ul>
</div>
and the important part is the dependency of js file
<script src="/yii-application/frontend/web/js/libraries/angular/angular.min.js"></script>
<script src="/yii-application/frontend/web/js/libraries/angular/angular-ui.js"></script>
<script src="/yii-application/frontend/web/js/libraries/jquery/jquery-1.11.3.min.js"></script>
<script src="/yii-application/frontend/web/js/libraries/flex/jquery.bxslider.min.js"></script>
<script src="/yii-application/frontend/web/assets/e3dc96ac/js/bootstrap.min.js"></script>
<script src="/yii-application/frontend/web/js/libraries/jquery-ui/jquery-ui.min.js"></script>
<script src="/yii-application/frontend/web/js/searchResult.js"></script>
<script src="/yii-application/frontend/web/js/Flight.js"></script>
and don't forget to put ui in module
var app = angular.module('myApp', ['ui']);
this is the bxslider that i use !!!! maybe solve your problem