I've seen the typical ('myContainer').select(); in Jquery. However, is there a way to select text within a .container div with Angular? I cannot find anything in the API reference and every search references the select element.
Angular does have .text() in its jQLite1.
You'd call it in a directive like:
angular.module('demo', [])
.directive('someDirective', function(){
return {
restrict: 'E',
templateUrl: 'template.html',
transclude: true,
scope: true,
link: function(scope, element, attrs) {
scope.content = {
changeText: function() {
button = element.find('button');
button.text('Nice new button')
}
}
}
}
}
)
Related
I have created a directive for showing a X besides a text box for clearing the data inside the text box,
Directive JS
angular.module(appName).directive('clrTxt', function () {
return {
restrict: 'E',
replace: true,
scope: {
cntrlas: '=',
mdlval: '='
},
link: function (scope, elem, attrs, ctrl) {
scope.cleartxt = function () {
scope.cntrlas[scope.mdlval] = '';
}
},
template: '<button class="close-icon" type="reset" id="closeicon" ng-click="cleartxt()" ><img src="/resources/img/quote-tool-close.png" class="clear-icon"></button>'
};
});
HTML
<input type="text" ng-model="item.epinNumber" ng-change="numberLengthCheck(item)" >
<clr-txt cntrlas="item" mdlval="'epinNumber'"></clr-txt>
This will create a X icon at the end of the text box and will clear the data when you click on it.
The issue is, I'm triggering a function on-change , So when the X icon is clicked, the data will be cleared and so ideally. the change event should be triggered. But for some reason the change event is not triggered when the data is cleared using the X directive.
The key point is to set bindToControllerand controllerAs alias.then you can access the controller function inside link function of directive.
angular.module('plunker', []);
function MainCtrl($scope) {
$scope.name = 'Test';
$scope.numberLengthCheck = function(n){
alert('change triggered '+ n);
};
}
angular.module('plunker').directive('clrTxt', function(){
return {
restrict: 'E',
controller: 'MainCtrl',
controllerAs: 'vm',
bindToController: true,
scope: {
cntrlas: '='
},
templateUrl: 'reverse_template.html',
replace: true,
link: function(scope, elem, attr, ctrls) {
scope.cleartxt = function () {
scope.cntrlas = '';
scope.numberLengthCheck(scope.cntrlas);
}
}
};
});
In ng-change the expression is not evaluated when the value change is coming from the model. If you want to listen the model $watch is useful
And here I think no need of sending extra attributes (cntrlas,mdlval) to clrTxtdirective. You can access the parent scope in directive by making scope:false which is default.
Directive JS
app.directive('clrTxt', function () {
return {
restrict: 'E',
replace: true,
template: '<button type="reset" ng-click="cleartxt()" >X</button>',
link: function (scope, elem, attrs, ctrl) {
scope.cleartxt = function () {
scope.item.epinNumber = '';
}
}
};
});
Controller JS
app.controller('MainCtrl', function($scope) {
$scope.$watch('item.epinNumber', function(newvalue,oldvalue) {
console.log('new value is ='+newvalue+ ' and old value is ='+oldvalue);
});
});
HTML
<body ng-controller="MainCtrl">
<input type="text" ng-model="item.epinNumber">
<clr-txt ></clr-txt>
{{item.epinNumber}}
</body>
Here is the working plunker LINK
I am trying to create a directive modal so i can use on other place.
I want the modal to pop when user do something. I use ng-show to hide it.
my html
<my-modal ng-show="showModal" data-text="my text"></my-modal>
my directive
angular.module('myApp').directive('myModal', ['$modal',
function($modal) {
return {
restrict: 'E',
scope: false,
link: function(scope, elem, attrs) {
$modal({
template: '<div>{{scope.attrs.text}}</div>'
scope: scope,
});
}
};
}
]);
My controller
angular.module('myApp').controller('tCtrl', ['$scope',
function($scope) {
$scope.showModal = false;
}
}])
For some reason, I can't hide modal and it always pops when the page first loads. How do I successfully hide it when the page first loads? Thanks for the help!
The link function runs as soon as the directive is loaded, so in your case, if you only want to show your modal once $scope.showModal = true, you have to modify your directive:
angular.module('myApp').directive('myModal', ['$modal',
function($modal) {
return {
restrict: 'E',
scope: {
display: '=',
},
link: function(scope, elem, attrs) {
scope.$watch('display', function(newVal, oldVal) {
if(newVal !== oldVal && newVal) {
$modal({
template: '<div>{{scope.attrs.text}}</div>',
scope: scope
});
}
});
}
};
}
]);
And change your html to
<my-modal display="showModal" data-text="my text"></my-modal>
I'm using directive to display html snippets.
And templateUrl inside the directive,
to be able to include snippets as html file.
The directive does not work, if I try to call
inside a builtin ng-repeat directive
({{snip}} is passed as is, without substitute):
div ng-repeat="snip in ['snippet1.html','snippet2.html']">
<my-template snippet="{{snip}}"></my-template>
</div>
For reference, here is the directive:
app.directive("myTemplate", function() {
return {
restrict: 'EA',
replace: true,
scope: { snippet: '#'},
templateUrl: function(elem, attrs) {
console.log('We try to load the following snippet:' + attrs.snippet);
return attrs.snippet;
}
};
});
And also a plunker demo.
Any pointer is much appreciated.
(the directive is more complicated in my code,
I tried to get a minimal example, where the issue is reproducible.)
attrs param for templateUrl is not interpolated during directive execution. You may use the following way to achieve this
app.directive("myTemplate", function() {
return {
restrict: 'EA',
replace: false,
scope: { snippet: '#'},
template: '<div ng-include="snippet"></div>'
};
});
Demo: http://plnkr.co/edit/2ofO6m45Apmq7kbYWJBG?p=preview
Check out this link
http://plnkr.co/edit/TBmTXztOnYPYxV4qPyjD?p=preview
app.directive("myTemplate", function() {
return {
restrict: 'EA',
replace: true,
scope: { snippet: '=snippet'},
link: function(scope, elem, attrs) {
console.log('We try to load the following snippet:' + scope.snippet);
},
template: '<div ng-include="snippet"></div>'
};
})
You can use ng-include, watching the attrs. Like this:
app.directive("myTemplate", function() {
return {
restrict: 'E',
replace: true,
link: function(scope, elem, attrs) {
scope.content = attrs.snippet;
attrs.$observe("snippet",function(v){
scope.content = v;
});
},
template: "<div data-ng-include='content'></div>"
};
});
Just made changes in directive structure. Instead of rendering all templates using ng-repeat we will render it using directive itself, for that we will pass entire template array to directive.
HTML
<div ng-init="snippets = ['snippet1.html','snippet2.html']">
<my-template snippets="snippets"></my-template>
</div>
Directive
angular.module('myApp', [])
.controller('test',function(){})
.directive("myTemplate", function ($templateCache, $compile) {
return {
restrict: 'EA',
replace: true,
scope: {
snippets: '='
},
link: function(scope, element, attrs){
angular.forEach(scope.snippets, function(val, index){
//creating new element inside angularjs
element.append($compile($templateCache.get(val))(scope));
});
}
};
});
Working Fiddle
Hope this could help you. Thanks.
it seems you are trying to have different views based on some logic
and you used templateUrl function but Angular interpolation was not working, to fix this issue
don't use templateUrl
so how to do it without using templateUrl
simply like this
app.directive("myTemplate", function() {
return {
link: function(scope, elem, attrs) {
$scope.templateUrl = '/ActivityStream/activity-' + $scope.ativity.type + '.html'
},
template: "<div data-ng-include='templateUrl'></div>"
};
});
hope this is simple and esay to understand
I would create a glossary, using an AngularJS directive. I start with this fiddle
http://jsfiddle.net/angularjsdc/KRVSQ/
I want to change the directive and substitute the modal with a tooltip.
app.directive('glossaryTerm', function () {
return {
controller: 'Glossary',
restrict: 'E',
scope: { /* empty */
},
template: /*HERE MY TOOLTIP TEMPLATE*/,
replace: true,
transclude: true,
compile: function (tElement, tAttrs, transclude) {
return {
pre: function (scope) {
transclude(scope, function (clone) {
scope.term = clone[0].textContent.toLowerCase();
});
},
post: function (scope) {
// load the definition into scope
scope.getDefinition(scope.term);
}
}
}
}
});
Any suggestion? Ideas?
Thanks
In the Angular bootstrap ui example you had to:
include http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js
import the module
var app = angular.module('app', ['app.services', 'ui.bootstrap']);
and surround the variables you were passing into tooltip with {{}}
template: '<span><a class="glossary-term" href="#" tooltip="{{glossary[term]}}">{{term}}</a></span>',
Here's the modified JSFiddle: http://jsfiddle.net/5DuSa/
I'm trying to apply a filter to the transcluded text in my directive but I'm not sure what's the best way to do this. A working copy of idea is at the following link but I feel I'm sorting of cheating by using the compile function to get at the transcluded text. See JSFiddle.
angular.module("MyApp").directive('highlighter', function () {
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
phrase: '#',
text: '#'
},
template: '<span ng-bind-html-unsafe=" text | highlight:phrase:false "></span>',
compile: function (elem, attr, transclude) {
transclude(elem, function (clone) {
// grab content and store in text attribute
var txt = clone[0].textContent;
attr.text = txt;
});
}
};
});
Other way to do would be http://jsfiddle.net/3vknn/, I guess.
angular.module("MyApp").directive('highlighter', function () {
return {
restrict: 'E',
scope: {
phrase: '#'
},
controller: function($scope, $filter) {
$scope.highlight = $filter('highlight');
},
link: function (scope, elem, attr) {
scope.$watch('phrase', function(phrase) {
var html = scope.highlight( elem.text(), phrase );
elem.html( html );
});
}
};
});