2015-12-03 3 views
1

У меня есть директива, которая получает высоту и ширину div, и я хочу передать эти данные в контроллер. Как это может быть сделано?Передача данных из директивы в контроллер

angular.module('Module', []) 
    .controller('TestController', ['$scope', '$rootScope', 
     function($scope, $rootScope,) { 



    }]).directive('myDirective', function($timeout) { 
     return { 
      restrict: 'A', 

      link: function(scope, element, attrs) { 
       scope.height = element.prop('offsetHeight'); 
       scope.width = element.prop('offsetWidth'); 
      } 
     }; 
    }); 

ответ

0

Html:

<input type="text" your-custom-text-field ng-model="textValue" ng-tooltip-max="5"> 

Директива:

yourApp.directive('yourDirName', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      'ngToolTipMax': '&', 
      'ngModel': '&' 
     }, 
     link: function (scope, element, attrs) { 
      scope.onChange = function() { 
       scope.ngModelValue = scope.model; 
      }; 
     } 
    }; 
}); 

Изолированный Область применения: передать некоторые значения от годовых аренда простора директив

Там уже 3 вида префиксов AngularJS обеспечивает

  1. «@» (Текст связывание/односторонний связывание)
  2. «=» (Прямая модель связывание/двухсторонней связывание)
  3. «&» (Поведение связывания/Метод связывания)

Все эти префиксы принимает данные от атрибутов элемента директивы.

получить помощь от http://jsfiddle.net/shidhincr/pJLT8/10/light/

Овладение Объем директив в AngularJS

http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

+0

Это не объясняет, как я могу передать эти данные из директивы в родительской области , – nareeboy

0

Чтобы сделать заказ директива более универсален, он у меня прочитать значение атрибута my-directive и используйте это имя для объекта области видимости.

В этом примере я создаю две коробки: «boxA» и «boxB» и поместим их высоту и ширину в область видимости.

HTML

<body ng-app="myApp"> 
<pre> 
green box size = {{boxA.height}},{{boxA.width}} 
red box size = {{boxB.height}},{{boxB.width}} 
</pre> 
    <div my-directive="boxA" style="height:50px;width:100px;background:green"> 
    </div> 
    <div my-directive="boxB" style="height:80px;width:20px;background:red"> 
    </div> 
</body> 

JS

angular.module("myApp").directive('myDirective', function() { 
    return { 
      restrict: 'A', 
      link: function(scope, element, attr) { 
        scope[attr.myDirective] = {}; 
        var d = scope[attr.myDirective]; 
        d.height = element.prop('offsetHeight'); 
        d.width = element.prop('offsetWidth'); 
        console.log(scope); 
        } 
    }; 
}); 

Результат

green box size = 50,100 
red box size = 80,20 

The Plunker

Смежные вопросы