Question

到目前为止，我一直在通过template / templateURL向指令添加HTML，但最近希望能够根据其调用的页面来改变指令的模板。我在线查看并看到提到将HTML直接放在指令标签中（在主HTML文件中），并且我已经完成了，但是我在HTML中放入的任何代码都是在根范围而不是指令中工作的范围，当我与之交谈的人说它应该在指令范围内工作时。

有没有办法将未从模板导入的指令标签中的HTML绑定到他们所在的指令范围？或者我是否必须将其分隔为不同的文件并通过模板导入？

基本上，我可以这样做：

<setup-itemized>
    <input type="text" ng-model="si.value">
</setup-itemized>

在si.value指令中而不是在根作用域中定义和设置setupItemized的位置？

http://plnkr.co/XCUzurOmV8yDyKhWnhfi

Answer 1

有很多方法可以实现这一点，举个例子：

http://jsbin.com/sasexum/edit?html,js,console,output

index.html

<div ng-controller="MainCtrl as ctrl">
  <setup-itemized value="ctrl.value">
    <input type="text" ng-model="ctrl.value">
  </setup-itemized>
</div>

main-controller.js：

.controller('MainCtrl', function() {
    vm = this;
    console.log('Loading MainCtrl and assign 1 to variable value');
    vm.value = 1;
})

setup-itemized.js：

.directive('setupItemized', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        bindToController: {
          value: '='
        },
        controller: function($scope) {
            vm = this;
            console.log('Loading Directive Controller and assign 10 to variable value');
            vm.value = 10;

            $scope.$watch('si.value', function(newVal) {
              console.log('New value for variable!');
            });
        },
        controllerAs: 'si',
        template: '<h1>Setup Itemized</h1>' +
                '<p>This is yuor custom directive with transclude!</p>' +
                '<ng-transclude></ng-transclude>'
    };
});

如您所见，您需要在父控制器中声明“value”变量，并通过指令和输入传递它。通过这种方式，您可以使用该变量进行双向绑定，并且每个更改都会反映在控制器和指令中。

将HTML放在指令标记中

1 个答案: