угловой js ng-click не работает, используя ng-bind-html [duplicate]
В Java все переменные, которые вы объявляете, на самом деле являются «ссылками» на объекты (или примитивы), а не самими объектами.
При попытке выполнить один метод объекта , ссылка просит живой объект выполнить этот метод. Но если ссылка ссылается на NULL (ничего, нуль, void, nada), то нет способа, которым метод будет выполнен. Тогда runtime сообщит вам об этом, выбросив исключение NullPointerException.
Ваша ссылка «указывает» на нуль, таким образом, «Null -> Pointer».
Объект живет в памяти виртуальной машины пространство и единственный способ доступа к нему - использовать ссылки this. Возьмем этот пример:
public class Some {
private int id;
public int getId(){
return this.id;
}
public setId( int newId ) {
this.id = newId;
}
}
И в другом месте вашего кода:
Some reference = new Some(); // Point to a new object of type Some()
Some otherReference = null; // Initiallly this points to NULL
reference.setId( 1 ); // Execute setId method, now private var id is 1
System.out.println( reference.getId() ); // Prints 1 to the console
otherReference = reference // Now they both point to the only object.
reference = null; // "reference" now point to null.
// But "otherReference" still point to the "real" object so this print 1 too...
System.out.println( otherReference.getId() );
// Guess what will happen
System.out.println( reference.getId() ); // :S Throws NullPointerException because "reference" is pointing to NULL remember...
Это важно знать - когда больше нет ссылок на объект (в пример выше, когда reference и otherReference оба указывают на null), тогда объект «недоступен». Мы не можем работать с ним, поэтому этот объект готов к сбору мусора, и в какой-то момент VM освободит память, используемую этим объектом, и выделит другую.
3 ответа
Хорошо, поэтому проблема заключается в том, что он не компилирует html, который вы включаете (угловой не анализирует его, чтобы найти директивы и многое другое). Невозможно придумать способ заставить его скомпилироваться из контроллера, но вы можете создать директиву, которая включает в себя контент, и скомпилирует его.
Итак, вы изменили бы
<p ng-bind-html="name"></p>
-
<p compile="name"></p>
И затем для js:
var myApp = angular.module('myApp', ['ngSanitize']);
angular.module('myApp')
.directive('compile', ['$compile', function ($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.compile);
},
function(value) {
element.html(value);
$compile(element.contents())(scope);
}
)};
}]).controller('MyCtrl', function($scope) {
var str = 'hello http://www.cnn.com';
var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-]*)?\??(?:[\-\+=&;%@\.\w]*)#?(?:[\.\!\/\\\w]*))?)/g;
result = str.replace(urlRegEx, "<a ng-click=\"GotoLink('$1',\'_system\')\">$1</a>");
$scope.GotoLink = function() { alert(); }
$scope.name = result;
});
Угловая 1.2.12: http://jsfiddle.net/7k8xJ/4/
Угловой 1.4.3: http://jsfiddle.net/5g6z58yy/ (тот же код, что и раньше, но некоторые люди говорили, что он не работает 1.4. *)
-
1Это отлично работает, спасибо! Точно так же, как мысль (и я не совсем понимаю, правильно ли понимаю $ sce, документация немного неясна), но нет возможности переименовать белый список, чтобы он выводился через ng-bind-html ? – Squrler 30 March 2014 в 16:21
-
2Это не работает для меня в угловых ошибках 1.4.3 ошибок ». Ошибка: [$ rootScope: infdig] 10 $ digest () итераций. ! Aborting & Quot; – CGeorges 15 October 2015 в 15:07
-
3видел это решение и в другом ответе .. но не работал для меня в 1.4. * – Ariful Haque 22 March 2016 в 14:57
-
4@ArifulHaque Кажется, все отлично работает на 1.4.3: jsfiddle.net/5g6z58yy – dave 22 March 2016 в 22:30
-
5Если вы подтвердите, я попробую еще раз. – Ariful Haque 23 March 2016 в 03:08
Явное доверие к HTML С помощью $sce Если вы хотите, чтобы Angular отображал данные модели как HTML без каких-либо вопросов, служба $sce - это то, что вам нужно. $sce - это служба Strict Contextual Escaping - причудливое имя для службы, которая может обертывать HTML-строку объектом, который сообщает остальной части Angular HTML, где ему доверяют.
В следующей версии контроллера запрашивает службу $sce и использует службу для преобразования массива ссылок в массив доверенных объектов HTML с помощью $sce.trustAsHtml.
app.controller('XYZController', function ($scope, $sce) {
$sce.trustAsHtml("<table><tr><td><a onclick='DeleteTaskType();' href='#workplan'>Delete</a></td></tr></table>");
-
1Присоединение обработчика onclick не то же самое, что привязать обработчик ng-click к элементу. Это не сработает, когда вы будете использовать ng-click вместо onclick в своем фрагменте. – M N Islam Shihan 1 October 2016 в 16:54
Я все еще сталкивался с некоторыми проблемами с компиляцией, поскольку это не отвечало моим требованиям. Итак, есть это, очень хороший и легкий взлом, чтобы обойти эту проблему.
Мы заменяем ng-click на onClick, поскольку работает onClick. Затем мы пишем функцию javascript и вызываем это на событие onClick. В функции onClick мы находим область привязки и вызываем эту функцию явно.
Ниже описано, как это делается:)
Ранее
<a id="myAnchor" ng-click="myControllerFunction()" href="something">
Теперь
<a id="myAnchor" onClick="tempFunction()" href="something">
внизу или где-то,
<script>
function tempFunction() {
var scope = angular.element(document.getElementById('myAnchor')).scope();
scope.$apply(function() {
scope.myControllerFunction();
});
}
</script>
Это должно работать сейчас. Надеюсь, что кто-то помог:)
Для получения дополнительной информации см. здесь .
-
1нет, это определенно не способ сделать это, не проверяемый, является неприятным обходным решением – Luca Trazzi 19 September 2016 в 14:25
-
2успокойтесь, я могу сделать это таким образом, как вы не можете его протестировать, разве я не упомянул выше это как обход? успокойтесь бросить, и, если возможно, удалите свою ярость из нисходящего потока? – Satys 19 September 2016 в 14:33
-
3@Satys поддержал вас, потому что вы упоминали, что это было обходным решением – Kurai Bankusu 27 September 2016 в 17:48
-
4
-
5