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

Question

我有多个ng-include元素的 src 属性设置为$scope.template_url.

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

html代码：

<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模板中的控制器中。