I have input(s) text inside a string and need to convert if found any characters like ## to <input type="text" />. I have no problems to return the value if I used ng-bind-html. However, ng-model value did not return using mathjax-bind.
How to solve this issue? Thanks.
HTML codes:
<script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: {inlineMath: [['`','`'], ['\\(','\\)']]} }); </script>
<div ng-controller="MyCtrl">
\(-3\times 4=\)
<br/>
<br/>
<br/>
<div mathjax-bind="output">
</div>
<br/>
<button ng-click="check_answer()">
Check Answer
</button>
</div>
Controller:
var myApp = angular.module('myApp',[]);
myApp.directive("mathjaxBind", function() {
return {
restrict: "A",
controller: ["$scope", "$element", "$attrs",
function($scope, $element, $attrs) {
$scope.$watch($attrs.mathjaxBind, function(texExpression) {
$element.html(texExpression);
MathJax.Hub.Queue(["Typeset", MathJax.Hub, $element[0]]);
});
}]
};
});
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.form = {};
var output = 'Answer: <br/> ##';
$scope.output = output.replace('##','<input type="text" ng-model="form.data.input1" />');
$scope.check_answer = function()
{
alert($scope.form.data.input1);
}
}
Mathjax-bind with angularjs model fiddle
I got the solution. I just need to compile again...the code:
myApp.directive("mathjaxBind", function($compile) {
return {
restrict: "A",
controller: ["$scope", "$element", "$attrs",
function($scope, $element, $attrs) {
$scope.$watch($attrs.mathjaxBind, function(texExpression) {
$element.html(texExpression);
$compile($element.html(texExpression).contents())($scope);
MathJax.Hub.Queue(["Typeset", MathJax.Hub, $element[0]]);
});
}]
};
});
Here's the working fiddle.
Related
Please have a look at this example, since it is the best way to explain the problem.
In this example if you click the directive link, it does not compile the template, but instead displays it as "{{1+1}}".
On the other hand if you click the "Simple link" it compiles the template and displays "2" instead.
angular.module('myApp', [])
.provider('$popup', function() {
var service = {};
this.$get = ['$compile', '$rootScope', function($compile, $rootScope) {
var template = $('<div>{{1+1}}</div>');
service.go = function() {
$(document.body).append(template);
$compile(template)($rootScope);
}
return service;
}];
})
.directive('popupLink', ['$popup', function($popup) {
return {
restrict: 'A',
scope: {},
link: function link(scope, element, attrs) {
element.click(function() {
$popup.go();
return false;
});
}
};
}])
.controller('mainCtrl', ['$scope', '$popup', function($scope, $popup) {
$scope.go = function() {
$popup.go();
};
}])
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">
<a ng-href="/test" popup-link>Directive link</a>
Simple link
</div>
My question is why isn't the template compiling with the directive? (but it does in the controller)
And how do I fix it so that it compiles in the directive also?
P.S. Here is the jsbin link in case you want to play around with the code:
http://jsbin.com/vuzutipedu/edit?html,js,output
The directive needs to do scope.$apply():
link: function link(scope, element, attrs) {
element.click(function() {
$popup.go();
//ADD apply
scope.$apply();
return false;
});
The click event handler executes outside the AngularJS framework. A framework digest cycle needs to be performed to execute the watcher for the {{1+1}} interpolation.
It works with the ng-click directive because that directive includes scope.$apply.
For more information, see
AngularJS Developer Guide - Integration with the browser event loop
DEMO
angular.module('myApp', [])
.provider('$popup', function() {
var service = {};
this.$get = ['$compile', '$rootScope', function($compile, $rootScope) {
var template = $('<div>{{1+1}}</div>');
service.go = function() {
$(document.body).append(template);
$compile(template)($rootScope);
}
return service;
}];
})
.directive('popupLink', ['$popup', function($popup) {
return {
restrict: 'A',
scope: {},
link: function link(scope, element, attrs) {
element.click(function() {
$popup.go();
//ADD apply
scope.$apply();
return false;
});
}
};
}])
.controller('mainCtrl', ['$scope', '$popup', function($scope, $popup) {
$scope.go = function() {
$popup.go();
};
}])
<script src="//unpkg.com/jquery"></script>
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="myApp" ng-controller="mainCtrl">
<a ng-href="/test" popup-link>Directive link</a>
Simple link
</div>
Try this in $get, instead of $compile(template)($rootScope)
$compile(angular.element(template))(angular.element(template).scope());
Let me know if it works
Please check this codepen, when clicked on the button click me to reset name, the name input should be reset to empty, when I do console.log on the directive scope, I do see name is set to empty string, but the value in the view not get updated. What's wrong?
CodePen example
angular.module('mainApp', [])
.directive('myTab', function() {
return {
restrict: 'E',
template: 'name: <input type="text" ng-model="name">',
controller: function($location, $scope) {
$scope.name = 'myname';
$('#clickMeToReset').on('click', function() {
$scope.name = '';
})
}
};
})
.directive('myMenu', function() {
return {
restrict: 'E',
template: '<button id="clickMeToReset">click me to reset name</button>'
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp">
<my-menu></my-menu>
<my-tab></my-tab>
</div>
After
$scope.name = '';
Do a
$scope.$apply();
When you use other libraries like jquery in angular, changes to variables like
$scope should manually broadcast.
$('#clickMeToReset').on('click', function(){
$scope.name = '';
$scope.$apply();
})
so $scope.$apply(); will do the trick!
Modify your controller code with the following:
controller: function($location,$scope, $timeout){
$scope.name = 'myname';
$('#clickMeToReset').on('click', function(){
$timeout(function() {
$scope.name = '';
});
})
}
angular.module('mainApp', [])
.directive('myTab', function() {
return {
restrict: 'E',
template: 'name: <input type="text" ng-model="name">',
controller: function($location, $scope, $timeout) {
$scope.name = 'myname';
$('#clickMeToReset').on('click', function() {
$timeout(function() {
$scope.name = '';
});
})
}
};
})
.directive('myMenu', function() {
return {
restrict: 'E',
template: '<button id="clickMeToReset">click me to reset name</button>'
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp">
<my-menu></my-menu>
<my-tab></my-tab>
</div>
Since you are using jQuery to change the value, which is out of the Angular's context, so Angular is unaware of the change. So you need to tell Angular that something has changed. So we are using $timeout service to achieve this. We can also use $scope.$apply() but that may fail when the digest cycle is already in progress.
Important
You should use ng-click instead and remove dependency of jQuery if possible since jQuery is also a big library in itself like Angular (see a working example below):
angular.module('mainApp', [])
.directive('myTab', function() {
return {
restrict: 'E',
template: 'name: <input type="text" ng-model="name">',
controller: function($scope) {
$scope.name = 'myname';
$scope.clearName = function() {
$scope.name = '';
}
}
};
})
.directive('myMenu', function() {
return {
restrict: 'E',
template: '<button ng-click="clearName()">click me to reset name</button>'
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="mainApp">
<my-menu></my-menu>
<my-tab></my-tab>
</div>
I hope According to my thinking this code help you . Only change Js code remaining HTML code is proper.
var mainApp = angular.module('mainApp', []);
mainApp.directive('myTab', function() {
return {
template: 'name: <input type="text" ng-model="name">',
controller: function($location,$scope){ debugger;
$scope.name = 'myname';
$('#clickMeToReset').on('click', function(){
$scope.name = '';
})
}
};
})
.directive('myMenu', function() {
return {
name:"clickMeReset",
template: '<button id="name" ng-click="clear()">click me to reset name</button>',
controller:
function($location,$scope){
$('#name').on('click', function(){
$scope.name = '';
})
}
};
});
I have simple directive, like this:
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
$scope.clicke = function(){
alert('test');
};
}])
.directive('myCustomer', function() {
return {
templateUrl: 'my-customer.html'
};
});
index.html
<div ng-controller="Controller">
<div my-customer click-event='clicke()'></div>
</div>
my-customer.html
Name: {{customer.name}} Address: {{customer.address}}
<button>click</button>
and I would like create event for click to button, and after it in my controller
use this event.
But I don't know how to do it.
Help me pls. Thanks a lot.
I would suggest using something Angular already gives you: ng-click.
Here's a JSBin example that I did for you:
<div ng-controller="Controller">
<div my-customer ng-click='clicke()'></div>
</div>
If you click on the directive, it should look like this:
You can use ng-repeat to iterate over an array of customers and then have your ng-click function take parameters assocaited to which customer (index in the array) is being displayed...
<div ng-repeat="customer customers track by $index" ng-click="myClickHandler(index)">
{{customer}}
</div>
I would suggest following solution. A working example can be found at -
#sumit Plunker
Here's a code sample:
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
$scope.clicke = function(evt) {
alert('test');
};
}])
.directive('myCustomer', function($parse) {
return {
restrict: 'A',
scope: true,
templateUrl: 'my-customer.html'
}
})
.directive('clickEvent', function($parse) {
return {
restrict: 'A',
scope: true,
link: function(scope, el, attrs) {
var expressionHandler = $parse(attrs.clickEvent)
el.find('#btnSubmit').on('click', function(e) {
expressionHandler(scope);
})
}
}
});
HTML:
<div ng-repeat="item in productArr">
{{ item.title }}
</div>
<div category-page-navigation current-page='currentPage' category-products-count='productsCount'></div>
JS:
.controller('categoryController', ['$scope', '$location', '$http', '$q', '$window', '$stateParams', function($scope, $location, $http, $q, $window, $stateParams) {
$scope.currentPage = 1;
$scope.productsCount = 0;
var GET = {
getProductData: function() {
var defer = $q.defer();
$http.post('services/loadProduct.php', {
'id' :1,
}).then(function(response) {
defer.resolve(response);
}, function(response) {
defer.resolve([]);
});
return defer.promise;
}
};
var getData = {
getProduct: function() {
var productData = GET.getProductData();
$q.all([productData]).then(
function(response) {
$scope.productArr = response[0].data.products;
$scope.productsCount = response[0].data.products.length;
});
}
};
getData.getProduct();
}])
.directive('categoryPageNavigation', function($compile, $parse) {
return {
scope: {
currentPage: '=currentPage',
categoryProductsCount: '=categoryProductsCount'
},
link: function (scope, element, attrs) {
debugger;
// Here scope.categoryProductsCount = undefined
// ...
$scope.$watch(scope.currentPage, function(value) {
// ...
});
}
};
});
I try to form new HTML for navigation to manipulate with HTML I get from ng-repeat.
In directive I need currentPage(from start =1) and total count of items from ng-repeat(length of array) witch I get from service. How I can pass variables to directive? First I need to get variables from service(ajax request or something else) then pass variables(some ather data) to directive.
If I understood correctly what you mean. Here is a code pen example on how to shared data between you controller and your directive.
A good read to understand the code below:https://docs.angularjs.org/guide/providers
http://codepen.io/chocobowings/full/Xmzxmo/
var app = angular.module('app', []);
//-------------------------------------------------------//
app.factory('Shared', function() {
return {
sharedValue: {
value: '',
}
};
});
//-------------------------------------------------------//
app.controller('ctrl', function($scope, Shared) {
$scope.model = Shared.sharedValue;
});
//-------------------------------------------------------//
app.directive('directive', ['Shared',
function(Shared) {
return {
restrict: 'E',
link: function(scope) {
scope.model = Shared.sharedValue;
},
template: '<div><input type="text" ng-model="model.value"/></div>'
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
Ctrl:
<div ng-controller="ctrl">
<input type="text" ng-model="model.value" />
<br/>
</div>
Directive:
<directive value="model.value"></directive>
</div>
I have a directive which shows input fields and I want to initialize those fields with data from the server. The problem is that I can't do that while using ng-model.
Before using a directive I used in the controller something like $scope.field1 = $scope.first.field1
Here's my code. I simplified it for the sake of readability but the idea's here.
In my controller I have this code:
app.controller('MyController',
['$scope', 'myData', function($scope, myData) {
myData.then(function(data) {
$scope.first = data.first;
$scope.second = data.second;
});
}]);
Inside first and second I have 2 field: field1 and field2.
In in html code, I have this bit:
<h1>First</h1>
<my-directive info="first"></my-directive>
<h1>Second</h1>
<my-directive info="second"></my-directive>
The directive is as follows:
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'static/js/myDirective.html',
link: function(scope, element, attrs) {
scope.doStuff = function() {
/* Do stuff with
scope.field1 and scope.field2 */
}
}
};
});
and the myDirective.html code:
<input type="text" ng-model="myfield1" />
<input type="text" ng-model="myfield2" />
<input type="submit" ng-click="doStuff()" />
If in myDirective.html I write:
<input type="text" value="info.field1" />
I can see the value fine.
Any ideas?
probably your directive initializes before your data loads. and your directive sees ng-model as an undefined variable. You are not using info directly in template so no auto $watch's for you :).
you need to $watch your info variable in directive and call your doStuff function on change.
note: i wouldn't recommend adding a controller to a directive just for this task. adding a controller to a directive is needed when you need to communicate with other directives. not for waiting async data
edit
you should do
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'static/js/myDirective.html',
link: function(scope, element, attrs) {
scope.doStuff = function() {
/* Do stuff with
scope.field1 and scope.field2 */
}
scope.$watch('info', function(newValue){
scope.doStuff();
});
}
};
});
Check working demo: JSFiddle.
Define a controller for the directive and do the initialization inside it:
app.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
info: '='
},
controller: ['$scope', 'myData', function ($scope, myData) {
myData.then(function(data){
$scope.first = data.first;
$scope.second = data.second;
});
}],
...
},
Inside the directive, myfield1 and myfield2 don't exist. You are close to solving the issue by using info.field1 instead.
var myApp = angular.module('myApp', []);
//Faking myData here; in your example this would come from the server
var myData = {
first: {
field1: "FirstField1",
field2: "FirstField2"
},
second: {
field1: "SecondField1",
field2: "SecondField2"
}
};
myApp.controller('MyController', ['$scope', function($scope) {
$scope.first = myData.first;
$scope.second = myData.second;
}]);
myApp.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
info: '='
},
template: '<input type="text" ng-model="info.field1" /><input type="text" ng-model="info.field2" /><input type="submit" ng-click="doStuff()" />',
link: function(scope, element, attrs) {
scope.doStuff = function() {
alert('Info: ' + scope.info.field1 + ', ' + scope.info.field2);
}
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<h1>First</h1>
<my-directive info="first"></my-directive>
<h1>Second</h1>
<my-directive info="second"></my-directive>
</div>