Angular js从指令内访问相关的控制器

Question

使用这样的HTML ......

<div ng-app="myApp">
    <div ng-controller="inControl">
        I like to drink {{drink}}<br>
        <input my-dir ng-model="drink"></input>
    </div>
</div>

和这样的javascript ......

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

app.controller('inControl', function($scope) {
    $scope.drink = 'water';
});

app.directive('myDir', function(){
    return {
        restrict: 'A',
        link: function($scope, element, attrs, ctrl) {

            // why is this logging undefined?
            console.log(ctrl);

        }
    };
});

为什么我不能从我的指令中访问控制器？为什么我打电话给ctrl给我未定义？

---

编辑：添加演示...

此处提供小提琴：http://jsfiddle.net/billymoon/VE9dX/

Answer 1

看到多个控制器可以附加一个应用程序和simillarly多个指令可以附加一个应用程序，所以如果你想在一个指令中使用一个控制器，你可以将指令的控制器属性设置为控制器的名称你希望你在你的情况下像你一样附加

app.directive('myDir', function(){
    return {
        restrict: 'A',
        controller: 'inControl'

        link: function($scope, element, attrs, ctrl) {
            // why is this logging undefined?
            console.log(ctrl);
        }
    };
});

Answer 2

尽管这与require:ngModel一起使用，但这仍然不是最好的方法，因为它将指令直接绑定到控制器。如果您希望指令与控制器通信，则可以设置并读取示波器。

HTML：

<div ng-app="myApp">
  <div ng-controller="inControl">
    I like to drink {{drink}}<br />
    <input my-dir="drink"></input>
  </div>
</div>

JS：

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

app.controller('inControl', function($scope) {
    $scope.drink = 'asdfasdf';
});

app.directive('myDir', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            console.log(scope[attrs.myDir]);
        }
    };
});

或者，您可以使用my-dir="{{drink}}"并将其读作attrs.myDir。

http://jsfiddle.net/8UL6N/1/

Answer 3

添加require: 'ngModel',为我修复了它 - 不确定是否有其他方法来指定它...

app.directive('myDir', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function($scope, element, attrs, ctrl) {

            // why is this logging undefined?
            console.log(ctrl);

        }
    };
});