как получить данные из angular directive

Я надеюсь, что кто-то может помочь мне с небольшим примером, потому что angular сводит меня с ума : (

Я делаю в первый раз формуляр, который должен следовать этой структуре: Угловое приложение

mainController
---- >smallController1
-------- >другие элементы
---- >smallController2
-------- >другие элементы
---->Указания1 (экземпляр 1)
---- >anotherSmallController
---->Указания1 (экземпляр 2)

Directive1 получает много атрибутов, и каждый экземпляр позволит выбрать много вариантов, и результат взаимодействия с пользователем должен храниться в объекте, и этот объект должен быть доступен из mainController для каждого экземпляра отдельно.

У кого-нибудь есть пример, который работает?

спасибо заранее, Джон!--1-->

7
angularjs angularjs-directive angularjs-scope

3 ответов

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

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

app.controller('mainController', 
                [
  '$scope', 
  function($scope){
    $scope.myObj = "Initial Value";
  }
]);

app.directive('dirName', [
  function(){
    return {
      restrict : 'A',
      scope : {
        obj : "=ngModel"
      },
      link : function(scope, element, attrs){
        scope.obj = attrs.newValue;
      }
    };
  }
]);
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app" ng-controller="mainController">
  <input dir-name ng-model="myObj" new-value="Final Value">
</body>
</html>

вы можете проверить этот ящик также:http://jsbin.com/fuqujo/1/edit?html,js, выход

10

используйте emit для отправки данных на родительский контроллер. Это может быть приемник, потому что слушать событие. читать О на излучении и трансляции. В вашем дочернем контроллере или директиве используйте:

$scope.$emit ('myEvent', object);

Это отправляет объект всем родительским контроллерам. В Родительском контроллере используйте:

$scope.$on ('myEvent', function (event, obj) { консоль.log (obj);});

для прослушивания излучаемого объекта.

1

попробуйте этот код, это может помочь вам:

http://plnkr.co/edit/L1NwUnNePofyRAQ6GVIg?p=preview

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.masterData = [
    {
      entry: 'dunno'
    },
    {
      entry: 'stuff'
    }
  ]
})
app.directive('vessel', function() {
  return {
    replace: true,
    scope: {
      data: '=',
      speciality: '@'
    },
    link: function(scope) {
      scope.updateData = function() {
        scope.data.entry = scope.speciality;
      }
    },
    template: '<div>{{data.entry}} <button ng-click="updateData()">update</button></div>'
  }
});

и шаблона:

  <body ng-controller="MainCtrl">
    <p>Master data {{masterData | json}}</p>
    <div vessel data="masterData[0]" speciality="eggs"></div>
    <div vessel data="masterData[1]" speciality="bacon"></div>
  </body>

Итак, у нас есть отдельные модели данных для каждой директивы, которые обновляются при вводе пользователем, соответствуя вашим требованиям. Правильно?

0