angularjs - 隔离范围内 Angular js 指令中 template 和 templateUrl 的区别

Question

我在隔离范围内有一个指令，并且我在指令的链接函数中定义了几个变量，因此模板无法绑定(bind)到这些变量，但 templateUrl 似乎很容易绑定(bind)到这些变量...这是什么原因？

mymodule.directive("directive1", function () {

    return {



        require: '^widget',

        // template: '<div><h1 > {{editMessage}}</h1></div>',
        templateUrl: "dummy.htm",


        scope: {
    },

    link: function (scope, element, attrs) {


        scope.editMessage = "Click to edit";
 });
}
});

我的dummy.htm具有与模板内容相同的代码:-

 <div><h1 > {{editMessage}}</h1></div>

当我使用 templateUrl 时会发生绑定(bind)，但当我使用 template 时却不会发生绑定(bind)，为什么会这样？这两者的执行流程是否不同？

Answer 1

问题是你没有很好地集成范围变量，它应该是这样的，这个例子:

mymodule.directive('myAlertaSeguimientoButton', function() {
return {
    restrict: 'A',
    scope: {
        myParamElemento: '=',
        myParamUrl: '@',
        myParamSeguir: '@',
        myParamDejarSeguir: '@',
        myParamSiguiendo: '@',
        myParamRefrescaMapa: '@'
    },
    template: '<button ng-class="(!myParamElemento.siguiendo)?\'btn btn-default seguir\':\'btn btn-default seguir siguiendo activeButtonAzul\'" class="btn btn-default seguir" ng-click="seguirNoSeguir(myParamUrl)"><span class="icon-seguir estadoUno">[[myParamSeguir]]</span><span class="icon-siguiendo icon-w estadoDos">[[myParamSiguiendo]]</span><span class="estadoTres">[[myParamDejarSeguir]]</span></button>',
    controller: ['$scope', 'Service', function($scope, Service) {...

在 html 中:

<span my-param-elemento="angular-var" my-param-url="angular-var" my-alerta-seguimiento-button></span>