AngularJS: render HTML in directive controller - javascript

I'm writing a directive for creating text from templates, but I cannot get to render my final result into HTML. This is the directive:
.directive('description', function($timeout){
function descriptionCtrl(){
var self = this;
self.result = "";
self.init = function(value) {
console.log("template in directive",value);
self.finalValue = "<div>HI <input type='text' id='hi' /></div>";
};
}
return {
restrict: 'AE',
controller : descriptionCtrl,
controllerAs: 'dc',
scope: {
text: "="
},
replace: true,
template: "<div id='template'>{{dc.finalValue}}</div>",
link: function(scope, iElement, iAttrs, ctrl) {
scope.$watch("text", function(value){
if(value!==undefined){
$timeout(ctrl.init(value),0);
}
});
}
}
});
The data comes from the controller and once the user has chosen between some options, hence the $watch.
Thank you!

You should use ng-bind-html to bind html to the div
template: "<div id='template' ng-bind-html='dc.finalValue'></div>",

Related

ng-directive not working after setting compiled html to div

Before setting the compiled html to dynamic-html div, my dynamicHtml is working correctly. As you can see, there's a onClick function in directive.
But unfortunately, after setting compiled html to div, onClick is not called anymore.
var content = $compile(res)($scope);
$('dynamic-html').html(content);
My dynamicHTML directive looks like this:
.directive('dynamicHtml', function($compile, $timeout) {
return {
restrict: 'E',
transclude: true,
link: function($scope, $element) {
$scope.datePickers = {};
$scope.onClick = function (variable, $event) {
var currentTarget = $event.currentTarget;
$scope.$parent.$parent.highlight(variable, true, currentTarget);
};
I tried to add transclude on directive as you can see. But it's not working on this case.
Can you please guide me to solve this problem?
Check it out the following code,
angular.module("myApp", [])
.directive("compiled", function($compile){
return {
restrict: "AE",
scope: {},
link: function(scope, ele, attrs){
var compiled = $compile("<div><hello-world></hello-world></div>")(scope);
ele.replaceWith(compiled);
}
}
})
.directive("helloWorld", function(){
return {
restrict: "AE",
scope: {},
transculde: true,
link: function(scope, ele, attrs){
scope.sayhello = function(){
alert("Hello World");
}
},
template: '<button ng-click="sayhello()">Say Hello</button>'
}
})
Html
<compiled></compiled>

Passing the value in directive to the ng-model. -angularjs

Hi Im trying to create a directive to pass some value to my ng-model,
in my directive i have a controller inside my directive and and i want to pass the value of it in my ng-model
Lets just say i have a string value, when i click the $scope.speakUP it should be pass it on the ng-model
.directive('speak', function(){
return {
restrict: 'A',
require: 'ngModel',
scope: true,
template: '<i ng-click = "speakUP()" class="icon ion-mic-a larger"></i>',
controller: function($scope, $element){
$scope.speakUP = function(){
$scope.passThisString = "Sample Data";
}
}
This is my HTML
<input type="text" ng-model="sampleModel" speak>
this is a quick example from where you can start implement your goals.
app.directive('inputField', function () {
return {
require: '?ngModel',
template: '<input ng-model="value" ng-change="onChange()"><i ng-click="speakUP()" class="icon ion-mic-a larger">click</i>',
link: function ($scope, $element, $attrs, ngModel) {
if (!ngModel) return;
$scope.speakUP = function(){
ngModel.$setViewValue('your data');
ngModel.$render();
}
$scope.onChange = function() {
ngModel.$setViewValue($scope.value);
};
ngModel.$render = function() {
$scope.value = ngModel.$modelValue;
};
}
};
});
HTML
<input-field name="sampleModel" ng-model="sampleModel"></input-field>

Dynamically passing HTML content to Angular directives as attributes

I am trying to dynamically load some HTML stored in a JSON file using Angular.
I am doing this by reading the JSON data into a scope and passing it to a directive that I wrote for loading HTML into the template.
Controller
.controller('testCtrl', function($scope, $http, $state){
$http.get('views/foo.json').then(function(res){
$scope.somehtml = res.data;
});
})
Directive
.directive('loadHtml', function($compile){
return {
restrict: 'AE',
scope: {
content: "#",
},
link: function(scope, element, attrs) {
scope.content = attrs.content;
element.html(scope.content).show();
$compile(element.contents())(scope);
},
template: '{{content}}'
};
})
This works!
<load-html content="hello success"></load-html>
This doesn't : (
<load-html content="{{somehtml}}"></load-html>
What am I missing here??
Found the solution myself, perhaps this helps someone:
I needed to "observe" the attribute value in the directive.
New Directive:
.directive('loadHtml', function($compile){
return {
restrict: 'AE',
scope: {},
link: function(scope, element, attrs) {
attrs.$observe('content', function(val) { /* $observing the attribute scope */
scope.content = val;
element.html(scope.content).show();
$compile(element.contents())(scope);
})
},
template: '{{content}}'
};
})

AngularJS updating ng-repeat via input not working?

I'm trying to update values in a ng-repeat on a ng-model;
I have the current directive:
app.directive('myDirective', function () {
return {
require: 'ngModel',
restrict: 'E',
template: '<div ng-repeat="e in model"><input ng-model="e"/></div>',
scope: {
ngModel: '='
},
link: function($scope, elem, attrs, ngModelCtrl) {
$scope.$watch(function (){
return ngModelCtrl.$modelValue;
}, function (v) {
$scope.model = ngModelCtrl.$viewValue;
});
}
};
});
but it isn't updating the value as illustrated here:
http://plnkr.co/edit/E89sbXY0gUw53EmJobz0?p=preview
anybody knows what might be wrong?
http://plnkr.co/edit/2JwxNzBRQa1dzACoJIpF?p=preview
Had to replace $scope.model = ngModelCtrl.$viewValue; with scope.model = ngModelCtrl.$viewValue; and it works fine.
app.directive('myDirective', function () {
return {
require: 'ngModel',
restrict: 'E',
template: '<div ng-repeat="e in model"><input ng-model="e"/></div>',
scope: {
ngModel: '='
},
link: function(scope, elem, attrs, ngModelCtrl) {
console.debug()
scope.$watch(function (){
return ngModelCtrl.$modelValue;
}, function (v) {
scope.model = ngModelCtrl.$viewValue;
})
}
};
});
UPDATE: I converted 'stuff' to an array of objects and now it works:
http://plnkr.co/edit/2JwxNzBRQa1dzACoJIpF?p=preview
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.stuff = [{number: 1},{number: 2},{number: 3}];
});
app.directive('myDirective', function () {
return {
require: 'ngModel',
restrict: 'E',
template: '<div ng-repeat="e in model"><input ng-model="e.number"/></div>',
scope: {
ngModel: '='
},
link: function(scope, elem, attrs, ngModelCtrl) {
console.debug()
scope.$watch(function (){
return ngModelCtrl.$modelValue;
}, function (v) {
scope.model = ngModelCtrl.$viewValue;
console.log(scope.model)
})
}
};
});
#Kiwi ng-repeat creates a child scope and ng-model will use the property on the child scope, because ng-model binding will evaluate on the current scope. This is the reason why the json presented in the view doesn't change in your example as it was bound to a property on the child scope created by the ng-repeat directive.
Check this simple jsfiddle example I hope it will be of help to you.
<div ng-app="demo">
<div ng-controller="DefaultController as ctrl">
{{ctrl.numbers | json}}
<numbers numbers="ctrl.numbers"></numbers>
</div>
</div>
angular
.module('demo', [])
.controller('DefaultController', DefaultController)
.controller('NumbersController', NumbersController)
.directive('numbers', numbers);
function DefaultController() {
var vm = this;
vm.numbers = [1, 2, 3];
}
function numbers()
{
var directive = {
restrict: 'E',
scope: {
numbers: '='
},
template: '<div ng-repeat="number in vm.numbers"><input type="number" ng-model="vm.numbers[$index]"/></div>',
bindToController: true,
controller: NumbersController,
controllerAs: 'vm'
};
return directive;
}
function NumbersController() {
var vm = this;
}

How can I get pass value from controller back to directive's template attribute in AngularJS?

I have created an AngularJS directive as shown below.
In the associated controller, I compute the value of a variable text as "SomeText". I want this text to replace Hello World!! in the template attribute of the directive. How can I do it?
My HTML:
<myp-directive myarg="myObject"></myp-directive>
My Directive:
myApp.directive('mypDirective',function(){
return {
restrict:'E',
scope: {
myarg: '='
},
controller: 'DirectiveCtrl',
controllerAs: 'directiveCtrl',
bindToController: true,
template: 'Hello World!!'
};
}
);
My Controller:
myApp.controller('DirectiveCtrl', function($scope){
var self = this;
$scope.$watch(function() {return self.prediction;}, function (newVal, oldVal)
{
if (newVal !== oldVal && newVal !== null){
var text = "SomeText";
}
});
});
Since you use the controllerAs: 'directiveCtrl' configuration you can simply assign "SomeText" as a variable of the controller (self) and it will be available in the template.
Pascal Precht wrote quite an extensive explanation about controllerAs.
Controller
myApp.controller('DirectiveCtrl', function($scope){
var self = this;
self.text = "Hello World!!";
$scope.$watch(function() {return self.prediction;}, function (newVal, oldVal)
{
if (newVal !== oldVal && newVal !== null){
self.text = "SomeText";
}
});
});
Directive
myApp.directive('mypDirective',function(){
return {
restrict:'E',
scope: {
myarg: '='
},
controller: 'DirectiveCtrl',
controllerAs: 'directiveCtrl',
bindToController: true,
template: '{{directiveCtrl.text}}'
};
}
);
Use scope. Bind the text 'Hello World' to a scope variable (data) and bind it in the template as {{data}}. The change the value of the scope variable from the controller.
Take a look at this fiddle
Directive
myApp.directive('mypDirective', function() {
return {
restrict: 'E',
scope: {
myarg: '='
},
controller: 'DirectiveCtrl',
controllerAs: 'directiveCtrl',
bindToController: true,
template: '{{data}}',
link: function(scope, elem, attr, directiveCtrl) {
scope.data = "Hello World!!!"
}
};
});

Categories

Resources