You can do this with an isolated scope by setting up a variable in the scope that’s two-way bound to the controller (using ‘=’). In your directive you can then assign the function to that variable, and angular will use the binding to find the corresponding variable in your controller. That variable will point to … Read more
As the official AngularJs doc says All element references in Angular are always wrapped with jQuery or jqLite (such as the element argument in a directive’s compile / link function). They are never raw DOM references. In details: if you include jQuery before your Angular reference, the angular.element() function becomes an alias for jQuery (it’s … Read more
You might be able to use a template function. According to the docs: You can specify template as a string representing the template or as a function which takes two arguments tElement and tAttrs (described in the compile function api below) and returns a string value representing the template. function resolveTemplate(tElement, tAttrs) { } angular.module(‘MyApp’).directive(‘maybeLink’, … Read more
remove replace: true on the directive by name ‘lw’ .. That should also solve . updated fiddle : updated fiddle app.directive(‘lw’, function(){ return { restrict: ‘E’, scope: { items: “=” }, template: ‘<listie items=”items”></listie>’, controller: function($scope) { } } }); Analysis : what caused the problem ? with replace=true for the lw directive what happens … Read more
link and compile do not work together, no. In the directive definition object, if you only define link, that’s like shorthand for having an empty compile function with an empty preLink function with your code in the postLink function. As soon as you define compile, link is ignored by angular, because compile should return the … Read more
So here’s what I ended up doing: I discovered you could pass a function to $scope.$watch. From there, it’s pretty straightforward to return the value of the expression you want to watch for changes. It will work exactly like passing a key string for a property on the scope. link: function ($scope, $el, $attrs) { … Read more
You can set up a bi-directional binding (see the documentation, section “Directive Definition Object”) with the variable in ngModel attribute, as with any other directives: <my-directive ng-model=”foo”></my-directive> myApp.directive(‘myDirective’, function () { return { template: ‘<div><input type=”text” ng-model=”ngModel” /></div>’, replace: true, scope: { ngModel : ‘=’, }, }; }); Fiddle
You’ll need to use ng-transclude, add transclude: true in your directive options, and add ng-transclude to your template: <div class=”example” style=”…” ng-transclude></div>` This plunkr has an example on how to use ng-transclude with a template, to keep the original dom element. http://plnkr.co/edit/efyAiTmcKjnhRZMTlNGf
The bug is now closed and they’ve added an entry over at the ui-router Wiki. It also includes a demo Plunkr. I will copy the code example here, just in case the URL would become outdated. HTML: <div class=”row”> <div class=”span12 ui-view-container”> <div class=”well” ui-view></div> </div> </div> CSS: /* Have to set height explicity on … Read more
Both controller’s $scope (defined in the controller, not in the sayHi function) and link scope are the same. Setting something in the controller will be usable from the link or viceversa. The problem you have is that sayHi is a function that is never fired so myVar is never set. Since sayHi is not in … Read more