角度：将变量传递给指令

Question

我希望将变量从控制器传递给我创建的指令：

的HTML

<div class="dropup inline-block" ng-repeat="event in video.events">
    <event video="video"></event>
</div>

指示

.directive("event", function() {
    return {
      restrict: "E",
      replace: true,
      scope:{
        video: '=videoObject'
      },
      template: '<a class="btn btn-default event-margin" ng-style="{color: video.iconColor, float: floatEvents}" type="button"  data-title="{{event.title}}"><span class="fa fa-fw {{event.icon}}"></span></a>',
      link: function(scope, elm, attrs) {
        elm
        .on('mouseenter', function() {
          elm.css('background-color', scope.video.color);
          elm.css('color','#FFFFFF');
        })
        .on('mouseleave', function() {
          elm.css('background-color','#FFFFFF');
          elm.css('color', scope.video.color);
        });
      }
    };

问题是，当我在返回的dict属性中添加范围时 ，它停止工作。

因此，这个想法是当我将鼠标移到元素上时，使用控制器$ scope中的变量video.color的值来更改元素的颜色。

我一直在其他帖子中寻找答案，但它们不起作用：

• 将变量从控制器范围传递到指令
• 将AngularJS作用域变量从指令传递到控制器的最简单方法？

Answer 1

如果视频是对象，则添加video: '=video' ，
如果视频是字符串，则添加video: '@video'

.directive("event", function() {
    return {
      restrict: "E",
      replace: true,
      scope:{
        video: '=video'
      },
      template: '<a class="btn btn-default event-margin" ng-style="{color: video.iconColor, float: floatEvents}" type="button"  data-title="{{event.title}}"><span class="fa fa-fw {{event.icon}}"></span></a>',
      link: function(scope, elm, attrs) {
        elm
        .on('mouseenter', function() {
          elm.css('background-color', scope.video.color);
          elm.css('color','#FFFFFF');
        })
        .on('mouseleave', function() {
          elm.css('background-color','#FFFFFF');
          elm.css('color', scope.video.color);
        });
      }
    };

Answer 2

好的，我找到了一个解决方案，视频是控制器的作用域变量。 在返回的dict中将scope设置为false允许指令访问控制器的范围。

该网站中的解释如下： https : //www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

当scope设置为“ true”时，AngularJS将通过继承父范围（通常是控制器范围，否则是应用程序的rootScope）来创建新范围。 对此新范围进行的任何更改都不会反映回父范围。 但是，由于新作用域是从父作用域继承的，因此在Ctrl1（父作用域）中所做的任何更改都将反映在指令作用域中。

当scope设置为“ false”时，控制器Ctrl1和指令使用相同的scope对象。 这意味着对控制器或指令的任何更改都将同步。