jquery breaks угловая директива

Question

Я относительно не знаком с угловыми и после часов отладки, я обнаружил некоторую несовместимость при добавлении jquery. Директива отлично работает без перерывов, но JQuery с ним:/

Вот plnkr:

http://plnkr.co/edit/sRwqrWV1ha4Dp7lvsSAg?p=preview

var app = angular.module('plunker', []); 

app.directive('dynamic', function ($compile) { 
    return { 
    restrict: 'A', 
    replace: true, 
    link: function (scope, ele, attrs) { 
     scope.$watch(attrs.dynamic, function(html) { 
     ele.html(html); 
     $compile(ele.contents())(scope); 
     }); 
    } 
    }; 
}) 

app.controller('MainCtrl', function($scope, $sce, $compile) { 

    $scope.trustedHtml = $sce.trustAsHtml('<button ng-click="testAlert()">Submit</button>'); 

    $scope.testAlert = function() { 
     alert('testing'); 
    }; 

});

Answer 1

Проблема возникает из-за того, что $sce.trustAsHtml не возвращает HTML-строку, а jQuery переопределяет метод .html.

Вы можете решить проблему с помощью:

var app = angular.module('plunker', []); 

app.directive('dynamic', function ($compile) { 
    return { 
     restrict: 'A', 
     replace: true, 
     link: function (scope, ele, attrs) { 
      scope.$watch(attrs.dynamic, function (html) { 
       ele.html(html.$$unwrapTrustedValue()); 
       $compile(ele.contents())(scope); 
      }); 
     } 
    }; 
}) 

app.controller('MainCtrl', function ($scope, $sce, $compile) { 

    $scope.trustedHtml = $sce.trustAsHtml('<button ng-click="testAlert()">Submit</button>'); 

    $scope.testAlert = function() { 
     alert('testing'); 
    }; 

}); 

Plunkr

ПРИМЕЧАНИЕ: Это решает проблему, но я не считаю, используя $$unwrapTrustedValue как хорошая практика. Лучшим решением будет иметь шаблон, который связывается с attrs.dynamic.

Это своего рода лучшее решение: http://plnkr.co/edit/xjS9gTJfyXvTL4LNzXub?p=preview

var app = angular.module('plunker', []); 

app.directive('dynamic', function ($compile) { 
    return { 
     restrict: 'A', 
     replace: true, 
     template: '<span ng-bind-html="dynamic" ng-click="method()"></span>', 
     scope: { 
      dynamic: '=', 
      method: '&' 
     } 
    }; 
}) 

app.controller('MainCtrl', function ($scope, $sce, $compile) { 
    $scope.trustedHtml = $sce.trustAsHtml('<button>Submit</button>'); 
    $scope.testAlert = function() { 
     alert('testing'); 
    }; 
}); 

HTML

<div dynamic="trustedHtml" method="testAlert()"></div>