I think the best solution would probably be to create your own transclude-replace directive that would handle this. But for a quick and dirty solution to your example you could essentially manually place the result of the transclusion where you want: my-transcluded-directive.html: <div> <span>I WILL BE REPLACED</span> <div>I will not be touched.</div> </div> Directive: return … Read more
I notice that this error also happens when binding data to an attribute on a custom directive. Where $scope.myData.value = “Hello!”; This causes the error: <my-custom-directive my-attr=”{{myData.value}}”></my-custom-directive> But this works fine: <my-custom-directive my-attr=”myData.value”></my-custom-directive>
You can inject services to component controller like this: angular.module(‘app.module’) .component(‘test’, { templateUrl: ‘views/someview.html’, bindings: { subject: ‘=’ }, controller: [‘$scope’, ‘AppConfig’, TestController] }); function TestController(scope, config) { scope.something = ‘abc’; } or like this: angular.module(‘app.module’) .component(‘test’, { templateUrl: ‘views/someview.html’, bindings: { subject: ‘=’ }, controller: TestController }); TestController.$inject = [‘$scope’, ‘AppConfig’] function TestController(scope, config) … Read more
Something like this should do it: <!doctype html> <html ng-app=”myApp”> <head> <script src=”http://code.angularjs.org/1.1.2/angular.min.js”></script> <script type=”text/javascript”> function Ctrl($scope) { var initial = {text: ‘initial value’}; $scope.myModel = angular.copy(initial); $scope.revert = function() { $scope.myModel = angular.copy(initial); $scope.myForm.$setPristine(); } } angular.module(“myApp”, []).directive(‘confirmOnExit’, function() { return { link: function($scope, elem, attrs) { window.onbeforeunload = function(){ if ($scope.myForm.$dirty) { return … Read more
You need almost never use preLink. Viable cases for it are when you need to manipulate data in scope, but not the DOM, before link functions (also of other directives) are executed. As jacob commented, you can always do that from a controller too, but sometimes it’s more appropriate to have the code in the … Read more
I’ve been researching in the past 3 weeks and turns out many people are thinking about an alternative after Angular took a drastic change path. Fortunately the upcomming W3C Web Components standard actually has all we need and it works right now with polyfills from the Polymer project. So to answer the question: Angular Directives … Read more
You are looking at ng-focus and ng-blur. <input type=”text” style=”border: none” ng-model=”model” ng-focus=”A()” ng-blur=”B()”> On a side note, use css classes instead of inline styles.. 🙂 Or just call the same method with argument and set the value acc:- <input type=”text” style=”border: none” ng-model=”model” ng-focus=”A(true)” ng-blur=”A(false)”>
What works is, if you set scope.text = $attrs.text; inside the linking and the controller functions. This will only work initially, as there is no 2way- databinding. You can use $attrs.observe though. See fiddle: http://jsfiddle.net/JohannesJo/nm3FL/2/
For anybody else who may be stuck or having difficulty with this, ignore the ‘autocomplete=”no”‘ value, and don’t use ‘display: block’ to show the ‘.pac-container’. go into your chrome devtools and make sure you can see the .pac-container div. set the z-index of that div in your css. When there is a searched value, google … Read more
A filter is an ideal solution for this purpose <div ng-repeat=”name in FootballClubs”> {{ name.CompanyName | titleCase }} </div> So the filter itself would be angular.module(‘myFootballModule’, []) .filter(‘titleCase’, function() { return function(input) { input = input || ”; return input.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); }; })