isolate-scope | 易学教程

ngChange fires before value makes it out of isolate scope

阅读更多关于 ngChange fires before value makes it out of isolate scope

问题 //main controller angular.module('myApp') .controller('mainCtrl', function ($scope){ $scope.loadResults = function (){ console.log($scope.searchFilter); }; }); // directive angular.module('myApp') .directive('customSearch', function () { return { scope: { searchModel: '=ngModel', searchChange: '&ngChange', }, require: 'ngModel', template: '<input type="text" ng-model="searchModel" ng-change="searchChange()"/>', restrict: 'E' }; }); // html <custom-search ng-model="searchFilter" ng-change=

Passing data from ng-click within directive into a function in the controller

阅读更多关于 Passing data from ng-click within directive into a function in the controller

问题 I found this question which gets me almost to where I need to be. Why doesn't ng-click work in my directive and how do I add a toggle class? Which makes it so my ng-click within my directive template triggers a function in my controller. http://plnkr.co/edit/GorcZZppa8qcIKbQAg2v?p=preview The issue is that the parameter returned to my controller (item) is undefined . I need this to actually pass data from a variable within my directive to be used in the function that I will run in the

Angular Isolate Scope for nested directives

阅读更多关于 Angular Isolate Scope for nested directives

问题 I'm attempting to set up an angular app with three directives - container, getter and setter. I've put it up at http://plnkr.co/edit/CoYLuVbiZTFWvNsN5r5L?p=preview <container> <getter name="first"></getter> <getter name="second"></getter> <setter name="setter"></setter> </container> Container has a scope with the variable value which can be read by getter and setter . getter displays the value whilst setter both displays and changes the value. angular.module("app").directive('container',

Share data from a directive within another isolated scope directive

阅读更多关于 Share data from a directive within another isolated scope directive

问题 I'm trying to take a component approach to my Angular code by writing component style directives, but I have run into a problem. Below is my html template for the page. Note that I'm using the AngularStrap tabs directive. The problem I'm having is that the woSamplesSummary.materialsCount is undefined right under the work-order directive (outside of the tab pane scope), but it displays correctly in the tab pane directive as part of the tab title (within the tab pane scope). So the basic issue

AngularJS event-based communication through isolate scope

阅读更多关于 AngularJS event-based communication through isolate scope

问题 In AngularJS, how can one directive use event-based communication ( $emit , $broadcast and $on ) to communicate with another directive which has an isolate scope? I've created two directives, and when the isolate scope is removed from the second directive, the first directive is able to use emit to successfully communicate with the second. However, when the isolate scope is added back to the second, communication breaks down. var app = angular.module('myApp', []); app.directive("firstDir",

AngularJS: Make isolate scope directive template bind to parent scope

阅读更多关于 AngularJS: Make isolate scope directive template bind to parent scope

问题 I've been struggling with Angular's isolate scope for over 24hrs now. Here's my scenario: I have an ng-repeat iterating over an array of objects from which I want to use a custom directive to either generate a <select> or <input> based on the field_type property of the current object being iterated. This means I'll have to generate the template and $compile in the post-link function of the directive since I have no access to the iterated object in the template function. Everything works as

ngChange fires before value makes it out of isolate scope

阅读更多关于 ngChange fires before value makes it out of isolate scope

//main controller angular.module('myApp') .controller('mainCtrl', function ($scope){ $scope.loadResults = function (){ console.log($scope.searchFilter); }; }); // directive angular.module('myApp') .directive('customSearch', function () { return { scope: { searchModel: '=ngModel', searchChange: '&ngChange', }, require: 'ngModel', template: '<input type="text" ng-model="searchModel" ng-change="searchChange()"/>', restrict: 'E' }; }); // html <custom-search ng-model="searchFilter" ng-change="loadResults()"></custom-search> Here is a simplified directive to illustrate. When I type into the input,

Access controller scope from directive

阅读更多关于 Access controller scope from directive

I've created a simple directive that displays sort column headers for a <table> I'm creating. ngGrid.directive("sortColumn", function() { return { restrict: "E", replace: true, transclude: true, scope: { sortby: "@", onsort: "=" }, template: "<span><a href='#' ng-click='sort()' ng-transclude></a></span>", link: function(scope, element, attrs) { scope.sort = function () { // I want to call CONTROLLER.onSort here, but how do I access the controller scope?... scope.controllerOnSort(scope.sortby); }; } }; }); Here's an example of some table headers being created: <table id="mainGrid" ng-controller

Using expression `(“&”)` binding to pass data from AngularJS component to parent scope

阅读更多关于 Using expression `(“&”)` binding to pass data from AngularJS component to parent scope

Can't access controller scope from angular component output binding function I'm trying to access my home controller scope from dashboard component but it's undefined. I also tried a second approach but then my function variable is undefined. I'm using Angular 1.5 with Typescript FIRST APPROACH: Home controller HTML: <div class="home-container"> <dashboard-component on-tile-type-changed="HomeCtrl.onTileTypeChanged"> </dashboard-component> </div> Home controller js: namespace app.dashboard { 'use strict'; class HomeController { static $inject:Array<string> = ['$window']; constructor(private

Access controller scope from directive

阅读更多关于 Access controller scope from directive

问题 I've created a simple directive that displays sort column headers for a <table> I'm creating. ngGrid.directive("sortColumn", function() { return { restrict: "E", replace: true, transclude: true, scope: { sortby: "@", onsort: "=" }, template: "<span><a href='#' ng-click='sort()' ng-transclude></a></span>", link: function(scope, element, attrs) { scope.sort = function () { // I want to call CONTROLLER.onSort here, but how do I access the controller scope?... scope.controllerOnSort(scope.sortby)