仅更改悬停的 ng-include 元素的 src，其中 src 的值是一个$scope变量

Question

我有多个ng-include元素，其中 src 属性设置为 $scope.template_url 。

我只想将悬停元素的 src 更改为新模板，但更改其值将更改所有元素。我该如何实现它？

网页代码：

<section class="parent">
   <div data-ng-include data-src="template_url"></div>
</section>

Javascript（在控制器中）：

angular.element(document).on('mouseover', '.parent', function(){
  $scope.$apply(function () {
      $scope.template_url = "path/to/new/template.html";
  });
});

编写 jQuery dom 操作是肮脏的，也不起作用：

$(this).attr('data-src', "path/to/new/template.html");

Answer 1

我建议将此作为指令。指令有自己的作用域，因此您仍然可以执行"悬停时使用不同的模板"的想法，但对于悬停的每个单独的模板。

<div>
    <div data-some-directive=""></div>
</div>

---

var myApp = angular.module('myApp',[]);
myApp.directive('someDirective', function() {
    return {
        controller: function ($scope) {
            $scope.model = "Hello"
            $scope.mouseover = function () {
                $scope.model = "Hovered!";
            };
        },
        scope:{},
        restrict: 'AE',
        replace: true,
        template: '<div><input ng-mouseover="mouseover()" ng-model="model"></div>',
    };
});

这里有一个小提琴来观察它的实际效果。

调整指令中的模板变量，以在模型上将变量用于包含 URL。

顺便说一下，angular 已经有一个鼠标悬停处理程序，所以我刚刚通过模板中的 ng-mouseover将其链接到控制器中。