I am using a jQuery component in angular with a directive like this:
angular.module('directives.flavr', [])
.directive('flavr', function () {
return {
restrict: 'E',
scope: true,
link: function (scope, element, attrs) {
element.bind('click', function () {
new $.flavr({
title: 'Form',
content: 'HTML form example',
dialog: 'form',
form: {content: '<div ng-include="directives/flavr/templates/loginForm.tpl.html"></div>', method: 'post'},
onSubmit: function ($container, $form) {
alert($form.serialize());
return false;
}
});
});
}
};
});
The flavr popup accept an HTML to build the modal window, is it possible to use a $templateCache html file to store this html ?
If it isn't possible, what is the best way to "pass" som random HTML content to my directive to render whatever I like ?
Ideally, I would like to do something like this:
<flavr html="/* I want to put a templatecache url and be able to load it when the popup is open */"></flavr>
Any ideas ?
Related
Inside a larger legacy app I have a view that uses AngularJS. In this view, I use a directive to display a Bootstrap modal (its content is created on the backend, then appended to the DOM).
No AngularJS methods seem to be working inside the modal. I understand it's because the modal content is appended to the DOM after AngularJS has compiled.
I'm looking for a way to allow the use AngularJS braces and methods inside the modal template. I've tried looking into $compile, $apply, and $digest, but so far I haven't been able to get it to work.
Relevant part of the code:
myApp.directive('formModal', ['$http', function($http) {
return {
restrict: 'E',
scope: true,
replace: true,
template: '...',
link: function postLink(scope){
// ...
$http({url: url}).then(function (response) {
if (response.data.status) {
modal.show({
title: 'Modal title',
content: response.data.form_html,
onShow: function ($modal) {
// ...
}
});
};
})
};
}
};
}]);
And part of the template where the modal is opened:
<form-modal class="btn-success" id="btn-form">
</form-modal>
In this question I have found how to access parent form within link in a directive. But I need it in my controller and access to form validation, so I implement this:
return {
restrict: 'A',
require: '?^form',
replace: true,
scope: {
someVariable: '='
},
link: function (scope, element, attrs, formCtrl) {
scope.formCtrl = formCtrl;
},
controller: function ($scope) {
$scope.someMethod = function () {
if ($scope.formCtrl.$valid) {
//Do something
}
}
}
};
It´s the correct way to do that? there's a better way?
EDIT: I need isolated scope and I´m actually using require: '?^form'
I need to design dynamic Menu , menu items will be loaded from json . and when menu clicked i want to apply different template on them .
I was palnning to use Directives but i wonder how can i use template while appending Element in Controller .I want to use template beacuse i dont want hardcoded thing , i want to call template file.
enter link description here
how can i pass attributes to template in above fiddle?
Any other suuggestion please let me know !!
app.directive("helloWorld", function() {
return {
restrict: "E",
scope: {
name: "#name"
},
template: "<button ng-click='click()'>Click me</button>",
controller: function($scope, $element){
$scope.clicked = 0;
$scope.click = function(){
alert("Element clicked");
$element.append('yes i did it');
}
}
};
});
You can use $http to download your template and after $compile to compile it:
app.directive("helloWorld", function($http, $compile) {
return {
restrict: "E",
scope: {
name: "#name"
},
link: function(scope, element, attrs) {
$http.get("yourTemplate").then(function(template) {
$compile(template)(scope);
element.append(template);
});
}
};
});
I have this in my index.html:
<div class="content">
<div data-ng-include="'views/title.html'"></div>
<div data-ng-view=""></div>
</div>
<div data-ng-include="'views/chat.html'"></div>
Whenever the controller/route changes, the html is inserted into data-ng-view.
However, I have an Angular directive which executes a Javascript function (callMyJSFunction) when it sees that there is a class 'chat-window' attached to a div in chat.html:
angular.module('myApp').directive('chatWindow', function () {
return {
restrict: 'C',
link: function(scope, element, attrs) {
element.callMyJSFunction({
hostname: 'www.domain.com',
data: 'other data'
});
}
}
});
What I want to happen is that every time the view changes, this Javascript function is called again. How do I do this?
Note that I don't want to move the chat.html into every html file - there are 20+ different views!
You can use the viewContentLoaded event that is emitted from the ngView directive.
In your directive, you could do this:
angular.module('myApp').directive('chatWindow', ['$rootScope', function($rootScope) {
return {
restrict: 'C',
link: function(scope, element, attrs) {
element.callMyJSFunction({
hostname: 'www.domain.com',
data: 'other data'
});
$rootScope.$on('$viewContentLoaded', function() {
element.callMyJSFunction(...);
});
}
}
}]);
on the Page
<rn-text-edit rn-scope="profile.first_name"></rn-text-edit>
on the js
app.directive("rnTextEdit", function () {
return {
restrict: 'E',
replace: true,
template:'<span>{{'+rn-scope+'}}</span>'
}
});
I know I can replace the DOM and access the attribute through link. I wonder if there is a way of passing the directive's attribute to a template.
If you are just displaying the value:
<rn-text-edit rn-scope="{{profile.first_name}}"></rn-text-edit>
-
app.directive("rnTextEdit", function () {
return {
restrict: 'E',
replace: true,
scope: {
rnScope: '#'
},
template: '<span>{{rnScope}}</span>'
}
});
If the directive needs to modify the value, you could use '=' and skip the double curlies.
fiddle
more info on scope and '#' in the Angular Directives page