2017-12-18 1 views
0

나는 다음 한 코드UI - 부트 스트랩 툴팁

// 템플릿

<span> 
    hello world! 
</span> 

// 지침

'use strict'; 

var referenceFieldTemplate = require('./reference-field.html'); 

module.exports = directiveFunction; 

/* @ngInject */ 
function directiveFunction($http) { 
    return { 
    restrict: 'E', 
    scope: { 
     fieldName: '=', 
     fieldValue: '=' 
    }, 
    templateUrl: referenceFieldTemplate, 
    controller: function($scope){ 
     console.log($scope); 
    }, 
    link: function(scope, element, attr) { 
     element.bind('mouseover',function(e) { 
     console.log(e); 
     }); 
    } 
    } 
} 

나는 사용자 정의 지시어를 렌더링하기 위해 노력하고있어 다음 코드를 사용하는 uib-tooltip

function eventRender(event, element, view) { 
    var hoverMarkup = '\'<reference-field field-name="test" field-value="test"></reference-field>\'' 
    element.attr({ 
     'uib-tooltip-html': hoverMarkup, 
     'tooltip-append-to-body': true, 
     'tooltip-class': 'tooltip-wrapper' 
    }); 
    $compile(element)($scope); 
}; 

컴파일 한 후 지시문이 DOM에 없습니다. 렌더링되지 않는 이유를 이해하고 싶습니다. 콘솔에 오류가 없습니다.

미리 감사드립니다.

+0

정확하지는 않지만 도움이 될 것 같아요. https://stackoverflow.com/questions/26541864/how-do-i-create-an-angularjs-tooltip-directive-with-a-compiled-template – tanmay

답변

0

"uib-tooltip-template"을 사용하여 최근에 비슷한 일을했습니다. 모든 HTML 코드를 템플릿에 넣으면 잘 작동합니다.

지시문을 사용하여 HTML 파일을 작성하고 $ scope를 통해 도구 설명으로 정렬하면됩니다.

관련 문제