I'm trying to do a variable replacement while also making it clickable with ngClick.
我正在尝试进行变量替换,同时使用ngClick进行可点击。
I made a plunker demo (click the button and observe that the input box stays unchanged)
我做了一个plunker演示(点击按钮,观察输入框保持不变)
Markup:
标记:
<body ng-controller="Ctrl">
<input type="text" id="input" name="input" ng-model="myValue" test>
<p translate="VARIABLE_REPLACEMENT" translate-values="{{ 'translationData' }}"></p>
<p ng-bind-html="alink"></p>
</body>
Angular stuff:
角度的东西:
var translations = {
VARIABLE_REPLACEMENT: 'Hi, {{name}}'
};
var app = angular.module('myApp', ['pascalprecht.translate', 'ngSanitize']);
app.config(['$translateProvider', function ($translateProvider) {
// add translation table
$translateProvider.translations(translations);
}]);
app.controller('Ctrl', ['$scope', '$sce', function ($scope, $sce) {
$scope.translationData = { name: 'foo'};
$scope.setValue = function(value) {
$scope.myValue = value;
};
}]);
app.directive('test', ['$translate', '$sce', function ($translate, $sce) {
return {
require: 'ngModel',
scope: false,
link: function (scope, element, attrs, ctrl) {
scope.$watch(attrs.ngModel, function (value) {
var a = $translate('VARIABLE_REPLACEMENT', {
name: '<button type="button" ng-click="setValue(\'foobar\')">click me</button>'
});
scope.alink = $sce.trustAsHtml(a);
});
}
};
}]);
The question is: Why doesn't ng-click="setValue('foobar')"
fire when the button is clicked. It's supposed to set the value 'foobar' in the input field.
问题是:为什么没有ng-click =“setValue('foobar')”点击按钮时会触发。它应该在输入字段中设置值'foobar'。
3 个解决方案
#1
7
In the meanwhile there is an official solution to that problem:
与此同时,该问题有一个官方的解决方案:
<p translate="varWithDirective" translate-compile></p>
would do the compilation without the need of writing a custom directive.
在不需要编写自定义指令的情况下进行编译。
For more info: https://github.com/angular-translate/angular-translate/issues/184
欲了解更多信息:https://github.com/angular-translate/angular-translate/issues/184
#2
10
Angular doesn't $compile
the $sce
markup. So Angular hasn't processed your ng-click
and attached the directive to it.
Angular不会$编译$ sce标记。因此Angular没有处理你的ng-click并将指令附加到它。
In order to use Angular directives inside your string, and have them live, you'll need to send the string to Angular's $compile
function.
为了在你的字符串中使用Angular指令并让它们存活,你需要将字符串发送到Angular的$ compile函数。
One easy way to do this is to use the following directive (found here:https://github.com/angular/angular.js/issues/4992)
一种简单的方法是使用以下指令(在此处找到:https://github.com/angular/angular.js/issues/4992)
Using this you'll replace:
使用它你将替换:
<p ng-bind-html="alink"></p>
with
同
<p compile="alink"></p>
And add this directive:
并添加此指令:
angularApp.directive('compile', function($compile) {
// directive factory creates a link function
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
});
});
#3
1
You created an element outside of angular. I'm not sure how pascalprescht works but you're going to need to tell the element to $compile (docs)
你创建了一个角度以外的元素。我不确定pascalprescht是如何工作的,但你需要告诉元素$ compile(docs)
#1
7
In the meanwhile there is an official solution to that problem:
与此同时,该问题有一个官方的解决方案:
<p translate="varWithDirective" translate-compile></p>
would do the compilation without the need of writing a custom directive.
在不需要编写自定义指令的情况下进行编译。
For more info: https://github.com/angular-translate/angular-translate/issues/184
欲了解更多信息:https://github.com/angular-translate/angular-translate/issues/184
#2
10
Angular doesn't $compile
the $sce
markup. So Angular hasn't processed your ng-click
and attached the directive to it.
Angular不会$编译$ sce标记。因此Angular没有处理你的ng-click并将指令附加到它。
In order to use Angular directives inside your string, and have them live, you'll need to send the string to Angular's $compile
function.
为了在你的字符串中使用Angular指令并让它们存活,你需要将字符串发送到Angular的$ compile函数。
One easy way to do this is to use the following directive (found here:https://github.com/angular/angular.js/issues/4992)
一种简单的方法是使用以下指令(在此处找到:https://github.com/angular/angular.js/issues/4992)
Using this you'll replace:
使用它你将替换:
<p ng-bind-html="alink"></p>
with
同
<p compile="alink"></p>
And add this directive:
并添加此指令:
angularApp.directive('compile', function($compile) {
// directive factory creates a link function
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
});
});
#3
1
You created an element outside of angular. I'm not sure how pascalprescht works but you're going to need to tell the element to $compile (docs)
你创建了一个角度以外的元素。我不确定pascalprescht是如何工作的,但你需要告诉元素$ compile(docs)