如何从 Angular 指令取回数据

Question

我希望有人能帮我举个小例子，因为 angular 快把我逼疯了:(

我第一次制作应遵循此结构的公式： Angular 应用程序

主控制器
---->smallController1
-------->其他元素
---->smallController2
-------->其他元素
---->指令 1（实例 1）
---->另一个小控制器
---->指令 1（实例 2）

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

有人有这样的例子吗？

提前致谢，约翰

Answer 1

使用emit向父控制器发送数据。它可能是接收者，因为正在监听事件。 Read 关于发射和广播。在您的子控制器或指令中使用：

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

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

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

监听发出的对象。

Answer 2

试试这个代码，它可能对你有帮助：

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>

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

Answer 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,output

如何从 Angular 指令取回数据

How To Get Data Back From Angular Directive

angularjs

angularjs-directive

angularjs-scope