更改 href 无法更新绑定到 ng-src 或 ng-href 的数据

Question

Html

<div class="result" ng-controller="test">
    <div>{{result}}</div>
    <a ng-href="{{result}}"></a>
</div>

JS

App.controller('AppCtrl', function AppCtrl($scope){
    $scope.result = "www.google.com";
}

在一个 jquery 文件中，由于某些原因我无法修改，一些代码更改了 href 的值，例如：

$('.result>a').attr('href','www.youtube.com');

我希望控制器中$scope.result的值也从"www.google.com"更改为"www.youtube.com"。但是 div 中的结果值在 jquery 代码之后没有改变。我需要自己写指令来观察 href 属性吗？或者还有其他使用 ng-href 的方法？我尝试自己编写指令，但没有用。我希望你能给我一个小例子。谢谢:)

更新：

这是我的指令，它不起作用，在 $('.result>a').attr('href','www.youtube.com') 之后，控制台没有打印"change!" 而 $scope.result 没有改变：

APP.directive('result', function() {
    return {
        restrict: 'E',
        scope: {
            ngModel: '='
        },
        template: "<div class='result'><a ng-href='{{ngModel}}' href=''></a></div>",
        replace: true,
        require: 'ngModel',
        link: function(scope, element, attrs) {
            var $element = $(element.children()[0]);
            scope.$watch($element.attr('href'), function(newValue) {
                console.log("change!");
                scope.ngModel = newValue;
            })
        }
    };
});

再次更新：还是不行...

Html:

<div class="result">
    <a ng-href="{{result}}" ng-model="result" class="resulta"></a>
</div>

JS:

APP.directive('resulta', function() {
    return {
        restrict: 'C',
        scope: {
            ngModel: '='
        },
        link: function(scope, element, attrs) {
            scope.$watch(attrs.href, function(newValue) {
                console.log("change!");
                scope.ngModel = newValue;
            })
        }
    };
});

Answer 1

您确实可以创建自定义指令来执行此操作。请参阅示例。我使用 transclude 范围，所以你可以在 link 中放入任何你喜欢的东西。我设置了 'replace: true' 所以该指令被删除并替换为 <a>.

更新使用 MutationObserver 观察 <a href>

的变化

var app = angular.module("MyApp", []);

app.directive("myHref", function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: true,
    link: function(scope, elem, attrs) {
      var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          scope.$parent.result = mutation.target.href;
          scope.$apply();
        });
      });

      // configuration of the observer:
      var config = {
        attributes: true,
        childList: true,
        characterData: true
      };

      observer.observe(elem[0], config);

    },
    scope: {
      myHref: '='
    },
    template: '<a target="_blank" ng-transclude href="{{myHref}}"></a>'
  };
});

app.controller('AppCtrl', function($scope) {
  $scope.result = "http://www.yahoo.com";
  $scope.$watch('result', function() {
    alert($scope.result);
  });
});



setTimeout(function() {
  $('.result > a ').attr('href', 'http://www.youtube.com');
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="MyApp">
  <div class="result" ng-controller="AppCtrl">
    <my-href my-href="result">My Link</my-href>
  </div>
</div>

更改 href 无法更新绑定到 ng-src 或 ng-href 的数据

Change href can't update the data which bind to ng-src or ng-href

javascript

angularjs

angularjs-ng-href

angular-directive