角度：通过变量指令

Question

我期待从控制器传递一个变量来我已经创建了一个指令：

HTML

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

DIRECTIVE

.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); 
     }); 
     } 
    }; 

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

所以这个想法是当我在元素上传递鼠标时改变元素的颜色，值为video.color，这是控制器$范围内的一个变量。

我一直在寻找其他职位的答案，但他们不工作：

• Passing variable from controller scope to directive
• Easiest way to pass an AngularJS scope variable from directive to controller?

Answer 1

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

在这个网站解释：https://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

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

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

Answer 2

如果视频对象，然后添加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); 
     }); 
     } 
    };