Question

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

我第一次制作应该遵循这种结构的Formular：角度APP

mainController
----＆GT; smallController1
--------＆GT; otherElements
----＆GT; smallController2
--------＆GT; otherElements
----＆gt; 指令1（实例1）
----＆GT; anotherSmallController
----＆gt; 指令1（实例2）

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

有没有人有这样的例子？

提前致谢，约翰

Answer 1

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

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

Answer 2

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

$ scope。$ emit（＆＃39; myEvent＆＃39;，object）;

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

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

收听发射物体。

Answer 3

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

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>

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

如何从angular指令获取数据

3 个答案: