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的值也从＆＃34; www.google.com＆＃34;更改到＆＃34; www.youtube.com＆＃34;。但是div中的结果值在jquery代码之后没有改变。我需要写指令来自己观察href属性吗？或者还有其他一些使用ng-href的方法？我试着自己写这个指令，但它没有用。我希望你能给我一个小例子。谢谢:)）

更新

这是我的指示，在$（＆＃39; .result＆gt; a＆＃39;）attr（＆＃39; href＆＃39;，＆＃39; www之类的东西之后，它没有用。 .youtube.com＆＃39;），控制台没有打印＆＃34;更改！＆＃34;并且$ 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范围，因此您可以在链接中放置任何您喜欢的内容。我设置'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的数据

1 个答案: