Question

我想将控制器中的值传递给指令模板。第一个跨度的输出也应该在第二个跨度中查看。

这是我的代码（简化）：

HTML

<div id="queryBuilder" class="queryBuilder" ng-hide="builder">
    <!--origin output-->
    <span class="output1" ng-model="output"></span >
</div>
<script type="text/ng-template" id="/queryBuilderDirective.html">
     <!--second output-->
    <span class="output2" ng-bind="output"></span >
</script>

JS

var app = angular.module('app', ['ui.bootstrap']);
app.controller('QueryBuilderCtrl', ['$scope', '$http', '$interval',
function($scope) {    

    $scope.output = 'test';

}]);
var queryBuilder = angular.module('queryBuilder', []);
queryBuilder.directive('queryBuilder', ['$compile',  
function($compile, $scope) {
    return {
        restrict : 'E',
        scope : {
            output : '=',
        },
        templateUrl : '/queryBuilderDirective.html'
     };       
}]);

也是一个不起作用的jsfiddle

Answer 1

您的代码有几个问题，主要问题是：

您的指令限制是＆＃39; E＆＃39;它代表元素，但您的html代码中没有适当的标记。它应该是<query-builder></query-builder>
你不能注入这样的服务：['$scope', '$http', '$interval', function($scope) { .... } ]。变量的数量应与注入服务的数量相匹配。请参考以下示例：https://stackoverflow.com/a/30952413/3076403和AngularJS文档：https://docs.angularjs.org/guide/di

尽管如此，工作指令应如下所示：

app.directive('queryBuilder', function () {
    return {
        restrict: 'E',
        scope: {
            output: '='
        },
        templateUrl : '/queryBuilderDirective.html'
    };
});

注意：确保您的指令指向有效的html文件queryBuilderDirective.html。在此文件中，您可以：

<span class="output2">{{output}}</span>

你＆＃34; main＆＃34;的调用html由QueryBuilderCtrl控制：

<query-builder output="{{output}}"></query-builder>

Answer 2

您需要在模块中使用指令而不是在控制器中。

所以，替换这个：

queryBuilder.directive('queryBuilder',

用这个：

app.directive('queryBuilder',

另外，我无法在你的指令中看到输出属性。范围绑定需要附加元素的属性。

如果您希望使用控制器的输出，请在指令中使用scope.output。

Answer 3

如果你的小提琴代码描述了问题，那么你需要使用服务。

如果您的控制器管理一项责任，并且您希望从其他部分访问数据，则必须使用服务作为所需数据的单一访问点。

如果你想使用指令中其他模块的控制器，只需注入相关模块，你就可以使用他的控制器了。

Answer 4

HTML

<div id="queryBuilder" class="queryBuilder" ng-hide="builder">
    <!--origin output--> 
    <span class="output1" ng-bind="output"></span >
    <query-builder output="output"></query-builder>
</div>

<script type="text/ng-template" id="/queryBuilderDirective.html">
      <!--second output-->
    <span class="output2" ng-bind="output"></span >
</script>

JS

var app = angular.module('app', ['queryBuilder']);
app.controller('QueryBuilderCtrl', ['$scope', '$http', '$interval',

function ($scope) {

    $scope.output = 'test';

}]);

var queryBuilder = angular.module('queryBuilder', []);
queryBuilder.directive('queryBuilder', ['$compile',

function ($compile, $scope) {
    return {
        restrict: 'E',
        scope: {
            output: '=',
        },
        templateUrl: '/queryBuilderDirective.html'
    };
}]);

jsfiddle

将值从控制器传递给指令

4 个答案:

HTML

JS