如何从angular指令获取数据

i hope somebody could help me with a small example, because angular is driving me crazy :(

我希望有人可以用一个小例子来帮助我，因为棱角分裂让我疯狂:(

I'm making by first time a Formular that should follow this structure: Angular APP

mainController
---->smallController1
-------->otherElements
---->smallController2
-------->otherElements
---->Directive1 (instance 1)
---->anotherSmallController
---->Directive1 (instance 2)

我是第一次制作一个应该遵循这个结构的Formular：Angular APP mainController ----> smallController1 --------> otherElements ----> smallController2 --------> otherElements ----> Directive1（实例1）----> anotherSmallController ----> Directive1（实例2）

The Directive1 receives many attributes, and each instance will allow the selection of many options, and the result of the user interaction should be stored in an object, and that object should be accessed from mainController for each instance separately.

Directive1接收许多属性，每个实例将允许选择许多选项，并且用户交互的结果应该存储在一个对象中，并且应该分别从mainController为每个实例访问该对象。

Does anyone have an example that work like that?

有没有人有这样的例子？

Thanks in advance, John

先谢谢你，约翰

3 个解决方案

#1

The best way to get data back from directive is to attach a model to directive's self scope.

从指令获取数据的最佳方法是将模型附加到指令的自我范围。

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>

You can check this bin as well : http://jsbin.com/fuqujo/1/edit?html,js,output

您也可以检查此bin：http：//jsbin.com/fuqujo/1/edit？html，js，output

#2

Use emit to send data to parent controller. It may be receiver because listening to event. Read about on emit and broadcast. In your child controller or directive use:

使用emit将数据发送到父控制器。它可能是接收器，因为听取事件。阅读有关发射和广播的内容。在您的子控制器或指令中使用：

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

$ scope。$ emit（'myEvent'，object）;

This sends object to all parent controllers. In parent controller use:

这会将对象发送给所有父控制器。在父控制器中使用：

$scope.$on('myEvent', function(event, obj) { console.log(obj); });

$ scope。$ on（'myEvent'，function（event，obj）{console.log（obj）;}）;

To listen to emitted object.

听取发射物体。

#3

Try this code out, it might help you:

尝试使用此代码，它可能会帮助您：

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>'
  }
});

And the template:

和模板：

  <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>

So, we have separate data models for each directive which are updated on user input, fitting your requirements. Right?

因此，我们为每个指令提供了单独的数据模型，这些模型根据用户输入进行更新，以满足您的要对？

#1