Angular js。为控制器分配指令

Question

我尝试将控制器与 Angular 中的指令连接。

这里html

<div ng-controller="MyCtrl">
   <div id='bbb' my-num>Click Me!</div>
</div>

我使用 MyCtrl 控制器，其中我定义了 tegid 和 mytitle.

MainControl.controller('MyCtrl', ['$scope',
  function($scope) {
    $scope.tegid = '';
    $scope.mytitle = 'aaa' + tegid;
  }]);

我还有指令 myNum，当鼠标悬停在其中时，我会收到 'id' 并更改其内容

MainDirectives.directive('myNum', function () {
 return {
    link: function ($scope, element, attrs) {
    element.bind('mouseenter', function () {
        tegid = element.attr('id');
        element.html(mytitle);
    });
 }
};
});

问题在于我无法连接指令和控制器。求教，如何把tegid传给MyCtrl控制器？为什么无法将mytitle转为指令myNum?

Answer 1

引用通过 link 函数传递的 $scope：

link: function ($scope, element, attrs) {
    element.bind('mouseenter', function () {
        $scope.tegid = element.attr('id');
        element.html($scope.mytitle);
    });
}

Answer 2

您需要将 tegid 和 mytitle 从控制器 socpe 传递到指令范围，方法如下：

使用独立作用域

指令：

directive('myNum', function () {
  return {
    scope: {
      id:    '=',
      title: '='
    },
    link: function ($scope, element, attrs) {
    element.bind('mouseenter', function () {
      // scope.id and scope.title are shared with parent scope via HTML bindings
      tegid = scope.id;
      element.html(scope.title);
    });
  }
};

Html:

<div id='tegid' title="nytitle" my-num>Click Me!</div>

这将为您的指令创建一个独立的作用域并且更清晰。但是，如果您不打算在其他地方重用该指令，您可以只依赖范围继承，这意味着您将可以访问父范围属性：

使用作用域继承

指令：

directive('myNum', function () {
  return {
    link: function ($scope, element, attrs) {
    element.bind('mouseenter', function () {
      // scope.teif and scope.mytitle come from the parent scope
      tegid = scope.teid;
      element.html(scope.mytitle);
    });
  }
};

Html:

<div my-num>Click Me!</div>

Angular js。为控制器分配指令

Angular js. Assign Controller with Directive

directive

controllers

angularjs

使用独立作用域

使用作用域继承