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;＆＃39;我改变了它的内容

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

您需要将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>

Answer 2

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

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

角度js。为控制器指定指令

2 个答案:

使用隔离范围

使用范围继承