Question

我有一个有角度的应用程序：

HTML

  <body ng-controller="DashboardController as vm">
    <div ng-controller="OneController as vm">
      Number inside the controler: {{vm.number}}
    </div>
    <div ng-controller="TwoController as vm">
      <me-dir></me-dir>
    </div>
  </body>

角

angular.module('plunker', [])

angular.module('plunker').controller 'DashboardController', ()->
  vm = @

angular.module('plunker').controller 'OneController', ()->
  vm = @
  vm.number = 7

angular.module('plunker').controller 'TwoController', ()->
  vm = @

angular.module('plunker').directive 'meDir', ()->
  return {
    #scope: {} ???
    #require ???
    #link ???
    template: "<strong>Got it!{{number}}</strong>"
  }

如何从 OneController 访问值 vm.number 并将其分配给指令内的范围？
是否可以使用指令中的 require 和 link 字段进行操作？
您可以使用 require 来引用现有的控制器吗？

目前OneController不是指令的父母，所以要求：＆＃39; ^ ctrlName＆＃39; 不起作用。我还没有找到很多关于controller / require字段的文档。如果我必须使用属性和东西来传递它，我知道该怎么做。问题严格来说是需要链接控制器指令字段。

Plunker link

Answer 1

使用服务跨组件共享数据

通过服务

在控制器和指令之间共享数据的代码非常简单的服务升级

angular.module('plunker').service 'SharedService', ()->  
  vm = @
  vm.number=7

angular.module('plunker').controller 'OneController', (SharedService)->
  vm = @
  vm.number = SharedService.number



angular.module('plunker').directive 'meDir', (SharedService)->
  return {
    scope:{}
    controllerAs:'dir'
    controller: ()->
      vm = @
      vm.number = SharedService.number
    template: "<strong>Got it!{{dir.number}}</strong>"
  }

的 DEMO

Answer 2

编辑2

＆＃13;

var app = angular.module("test", []);
app.controller("Ctrl1", function($scope) {
    $scope.name = "Harry Potter";
});

app.controller("Ctrl2", function($scope) {
    $scope.any = "Any"
});
app.directive("myDirective", function($compile) {
    return {
        restrict: "EA",
        scope: true,
        link : function(scope, element, attr) {
            var scopeCtrlOne = angular.element('[ng-controller="Ctrl1"]').scope();
            angular.element(element).append($compile(
                "<div>Your name is : {{name}}</div>" +
                "Change your name : <input type='text' ng-model='name' />")(scopeCtrlOne)
            );
		}
    };
});

＆＃13;

 h2 {
   cursor: pointer;
 }
 .directive {
   border: 5px solid #F5BF6E;
   ;
   padding: 10px;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="test">
  <div ng-controller="Ctrl1">
    <h2 ng-click="reverseName()"> {{name}}, CTRL ONE</h2>
    <div ng-controller="Ctrl2">
      <h2 ng-click="reverseName()"> {{any}}, CTRL TWO</h2>
      <div my-directive class='directive'></div>
    </div>
  </div>
</div>

＆＃13;

编辑1

看看这个。有关详细信息：http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

＆＃13;

var app = angular.module("test",[]);

app.controller("Ctrl1",function($scope){
    $scope.name = "Harry";
    $scope.reverseName = function(){
        $scope.name = $scope.name.split('').reverse().join('');
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: true,
        template: "<div>Your name is : {{name}}</div>"+
        "Change your name : <input type='text' ng-model='name' />"
    };
});

＆＃13;

h2 {
    cursor: pointer;
}
.directive {
    border: 5px solid #F5BF6E;;
    padding: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test">
    
    <div ng-controller="Ctrl1">
        <h2 ng-click="reverseName()">Hey {{name}}, Click me to reverse your name</h2>
        <div my-directive class='directive'></div>
    </div>
</div>

＆＃13;

从指令访问控制器

2 个答案: