[英]How use controller variable inside a AngularJs directive
如何在指令中使用控制器變量。 我在指令的作用域內使用了popoverHtml ,但是當我添加這種類型的類型不起作用時:
像這樣:作用域:{popoverHtml:'@',鍵入:@},
我的html是:
good <input type='radio' name='type' value='good' data-ng-model='type'
data-ng-change='change(type)' />
bad <input type='radio' name='type' value='bad' data-ng-model='type'
data-ng-change='change(type)' />
<next-level id='pop' popover-html='{{typeMessage}}'></next-level>
我的控制器是:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.typeMessage = 'PopOverTest';
$scope.type = false;
$scope.change = function(type){
if(type == 'good'){
$scope.typeMessage = 'very good';
}else if(type == 'bad'){
$scope.typeMessage = 'very bad';
}
};
});
我的指令:
app.directive('nextLevel', function () {
return {
restrict: 'EA',
scope:{ popoverHtml:'@'},
template: '<a ui-sref="register" tabindex="0" linkdisabled="{{type}}"
class="btn btn-block btn-success ng-class: {disabled: !(type)}" role="button" >next</a>',
link: function (scope, el, attrs){
$(el[0]).popover({
trigger: 'click',
html: true,
toggle:'popover',
title: 'notice !!',
content: scope.popoverHtml, // Access the popoverHtml html
placement: 'bottom'
});
attrs.$observe('popoverHtml', function(val){
$(el[0]).popover('hide');
var popover = $(el[0]).data('bs.popover');
popover.options.content = val;
console.log(popover);
})
}
};
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.