Question

我有多个{s}属性设置为ng-include的{{1}}元素。

我想将 hovered element only 的src更改为新模板，但更改它的值将更改所有元素。我该如何实现呢？

Html代码：

$scope.template_url

Javascript（在控制器中）：

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

编写jQuery dom操作很脏，也不起作用：

angular.element(document).on('mouseover', '.parent', function(){
  $scope.$apply(function () {
      $scope.template_url = "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>',
    };
});

Heres a fiddle to see it in action.

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

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

更改仅包含在内的ng-include元素的src，其中src的值是$ scope变量

1 个答案: