2

Приветствую!

Подскажите пожалуйста, как из контроллера передать данные в директиву, используя синтаксис controller as

Например:

angular
    .module('test', [])
    .controller('first', function () {
        this.somevar = 'Lorem';   // -> Эту переменную
    })
    .directive('one', function () {
        restrict: 'A',
        link: function () {
            console.log(somevar); // <- Получить здесь
        }
    });
5
  • куча вариантов, начиная от передачи в разметке, и заканчивая получением с скопа
    – Grundy
    9 мар 2017 в 14:54
  • @Grundy, я был бы рад парочке вариантам или ссылке с оными) 9 мар 2017 в 14:56
  • например jsfiddle.net/joshdmiller/FHVD9 9 мар 2017 в 15:08
  • @KonstantinOkhotnick, мне нужно не отобразить, а передать для дальнейшего использования) 9 мар 2017 в 15:13
  • @Николай, ну так и используй этот scope.obj в пример
    – Grundy
    9 мар 2017 в 15:28

2 ответа 2

3

Подобные неявные зависимости - зло.
Это как глобальные переменные, только хуже.
Директива не должна никак зависеть от контроллера.
Её должно быть безболезненно просто перенести в другое место.

  • Вариант 1(так себе): На каждую переменную из внешнего scope внутри директивы заводится значение по умолчанию. Получается что-то типа %ENV% окружения. Все данные доступны в любом месте, но внешний контроллер может переопределить часть из них.

angular
    .module('test', [])
    .controller('first', ['$scope', function ($scope) {
      $scope.somevar = 'Lorem';
    }])
    .directive('one', function() {
       var defaults = {
         somevar: 'Ipsum',
         othervar: 'Dolor'
       };
       
       return {
        restrict: 'A',
        link: function(scope) {
          var params = {};
          Object.keys(defaults).forEach(key => 
              params[key] = scope[key] || defaults[key]
          );
          console.log(params.somevar, params.othervar) ;
        }
      };
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="first as c">
  <div one></div>
</div>

  • Вариант 2: Изолированный scope у директивы, вся значимая информация передаётся через атрибуты.

angular
    .module('test', [])
    .controller('first',['$scope', function ($scope) {
        this.somevar = 'Lorem';  
    }])
    .directive('one', function() {
       return {
        restrict: 'A',
        scope: {text: '='},
        link: function(scope) {
         console.log(scope.text) 
        }
      };
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="first as c">
  <div one text="c.somevar"></div>
</div>

  • Вариант 3: Для обмена данными используются сервисы.

angular
    .module('test', [])
    .controller('first', ['dataProvider', function (data) {
      data.set('somevar', 'Lorem');
    }])
    .service('dataProvider', function() {
      var data = {};
      this.set = function(key, val){data[key] = val;};
      this.get = function(key) {return data[key];};
    })
    .directive('one', ['dataProvider', function(data) {
       return {
        restrict: 'A',
        scope: {},
        link: function() {
         console.log(data.get('somevar')) 
        }
      };
    }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="first as c">
  <div one></div>
</div>

4
  • добавь пример для первого варианта, не пойму, что ты имеешь ввиду
    – Grundy
    9 мар 2017 в 16:03
  • Пару минут, третий вариант допишу)
    – vp_arth
    9 мар 2017 в 16:05
  • @Grundy, Добавил пример для первого варианта
    – vp_arth
    9 мар 2017 в 16:17
  • @vp_arth, спасибо! Решил использовать сервис :) 10 мар 2017 в 8:15
0

Вот например:

var myApp = angular.module('myApp',[]);

myApp.directive('one', function() {
    return {
        restrict: 'A',
        link: function (scope) {
            console.log(scope.somevar); // <- Получить здесь
        },
    };
});

myApp.controller('MyCtrl', function ($scope) {
     $scope.somevar = 'Lorem';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <div one></div>
</div>

Ещё вариант:

angular
    .module('test', [])
    .controller('first',['$scope', function ($scope) {
        $scope.somevar = 'Lorem';  
    }])
    .directive('one', function() {
       return {
        restrict: 'A',
        link: function (scope) {
            console.log(scope.somevar)
        },
      };
    });
   
   
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="first">
  <div one></div>
</div>

И ещё 1 вариант

angular
    .module('test', [])
    .controller('first',['$scope', function ($scope) {
        this.somevar = 'Lorem';  
    }])
    .directive('one', function() {
       return {
        restrict: 'A',
        controller: 'first',
        link: function(scope, element, attrs, ctrl) {
         console.log(ctrl.somevar) 
        }
      };
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="first">
  <div one="somevar"></div>
</div>

17
  • обрати внимание, что в вопросе речь идет про controller as синтаксис, только поле в контроллере, а не напрямую в скопе
    – Grundy
    9 мар 2017 в 15:32
  • @Grundy, можно поподробней? =) 9 мар 2017 в 15:40
  • @Николай, если ты в контроллере сделаешь this.somevar = 'Lorem';, то в директиве ты ее не достанешь как просто scope.somevar = 'Lorem';
    – Grundy
    9 мар 2017 в 15:42
  • @Grundy, а это разве не смешивание синтаксисов? И насколько "плохо" так делать? 9 мар 2017 в 15:43
  • @Николай, не знаю что такое смешивание синтаксисов. Пример который я привел - просто работать не будет
    – Grundy
    9 мар 2017 в 15:46

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.