Question

这只是我实际应用中的摘要。

我有很多父母的$scope.data对象。然后在一个孩子，有这个

<input ng-model="data.number" calc="data" get-data='{"value":"data"}'>

基本上：

calc指令对data对象进行了一些计算。
get-data指令更加抽象（因为它应该与多个计算一起使用，如calc）。所以我想只是将JSON字符串传递给它，以告诉data是获取实际数据的地方。

我的calc没问题，因为我可以使用ng-model访问require:"ngModel"。但我在使用get-data时遇到问题，因为我不知道如何告诉Angular字符串"data"在父级处意味着$scope.data。如果查看控制台日志，则范围中不会显示data。我可以通过父母来深入了解它，但我再也不能假设它是1级或10级。

enter image description here

问题：如何转换＆＃34;数据＆＃34;引用实际的$ scope.data对象？

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

HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.1/angular.js" data-semver="1.4.1"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="ParentCtrl">
    <div ng-controller="MainCtrl">
      <input ng-model="data.number" calc="data" get-data='{"value":"data"}'>
      <p> 
        {{ data }} 
      </p>
    </div>
  </body>

</html>

JS

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

app.controller('ParentCtrl', function($scope) {
  $scope.data = {number: 3};
});

app.controller('MainCtrl', function($scope) {
});

app.directive('calc', function() {
  return {
    // scope: {
    //   ngModel: '='
    // }, 
    require:"ngModel",
    link: function(scope, el, attrs, ngModel) {
      console.log('calc');
      console.log(scope);
      console.log(ngModel);
      scope.$watch('data', function(newVal, oldVal) {
        newVal.multiply = newVal.number * 2;
        console.log('scope.$watch trigger');
        console.log(newVal);
      }, true);

      el.bind('blur', function() {
        console.log('calc blur');
        console.log(scope);
      });
    }
  }
});

app.directive('getData', function() {
  return {
    scope: {
      ngModel: '='
    },
    link: function(scope, el, attrs, ngModel) {
      console.log('getData');
      console.log(scope);
      console.log(attrs); 
      var dataJSON = JSON.parse(attrs.getData);
      console.log(dataJSON.value); 
      scope.$watch('data', function() {
        // scope.data.multiply = scope.data.number * 2;
      }, true);

      el.bind('blur', function() {
        console.log('getData blur');
        console.log(scope);
      });
    }
  }
});

更新1

假设我们不知道calc是否在同一个元素中。可能有calc1，calc2，......在那里
我需要访问＆＃34;参考＆＃34; $scope.data来观察它的变化（模糊事件）。不只是实际的数据内容本身。

更新2

calc可能在同一DOM中具有隔离范围。如果getData也使用隔离范围，则会显示错误Multiple directives [], getData (module: plunker)] asking for new/isolated scope on

Answer 1

您可以简单地使用嵌套插值

get-data='{"value":{{data}}}'

这将使data引用$scope.data指令中的实际get-data对象。

enter image description here

这是plunkr

<强>更新

如果您想要访问对象引用以观察data中的更改，那么您需要使用attrs.$observe（$watch无法工作），因为data是绑定到指令的属性。

  attrs.$observe('getData', function(newVal) {
        console.log('NEW VAL: '+newVal)
  }, true);

检查更新的plunkr

Answer 2

问题是你的getData指令声明了一个＆＃34;隔离范围＆＃34;通过返回＆＃34;范围属性＆＃34;所以它的范围不使用父级的范围，而是它自己的范围，如果你真的需要一个孤立的范围和父级的一些数据，你应该使用：

app.directive('getData', function() {
  return {
    scope: {
      data: '@'
    },

和＆＃34;数据＆＃34;来自父范围的财产可以在隔离范围内访问，因为＆＃34;数据＆＃34;属性

Answer 3

以下是有关指令的一些有用信息：

enter code here

http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/

http://jonathancreamer.com/working-with-all-the-different-kinds-of-scopes-in-angular/

我的解决方案plunkr

从两个指令访问范围数据

3 个答案: