Question

我在指令html模板中访问控制器范围内的变量时遇到问题。我不确定如何将它的范围传递给我的html进行显示，因为我打算使用同一指令的多个副本。

目前无论是否从项目中删除控制器，compound.html中表达式的值都会显示＆＃34; 0＆＃34;。

如何通过控制器＆＃34; compoundController＆＃34; to＆＃34; compound.html＆＃34;指令模板？

索引

<compound objectid="{{controll.compoundId}}"></compound>

指令

angular.module('ireg').directive('compound', function () {
    return {
        restrict:'E',
        scope: {             
            objectid:'@objectid'
        },
        controller: 'compoundController',
        templateUrl: 'compound.html'
    }
});

控制器

angular.module('ireg').controller("compoundController",
  ['$scope','$routeParams','compoundService', 
  function($scope,$attrs,compoundService ){
    var vm = this;
    vm.objectid = 2;
    vm.compoundData;

    vm.getPayload = function(scope, compoundController){
        var promise = compoundService.getData($scope.objectid);
        promise.then(
            function(payload) { 
                vm.compoundData = payload.data[0];
            }
        );
    };

}]);

服务

angular.module('ireg').factory('compoundService', function($http) {
    return {
        getData: function(id) {
            var url = "http://localhost:8080/return-compound-data.php?compound=" +id;
            return $http.get(url);
        }
    }
});

Compound.html

    <div class = "panel-heading">
        <div class="card-title"> {{compound-controller.compound-data.project_name}} </div>
    </div>  <!-- end of panel heading -->

    <div class = "panel-body" >
        <table class = "rwd-table">
            <tr>
                <th>Compound Number</th>
            </tr>
            <tr> 
                <td data-th="Compound Number">{{controll.compound_number}}</td>
            </tr>
        </table>
    </div>

</div>

Answer 1

在范围映射之前使用指令中的＆＃39; =＆＃39;运算符，并将大括号留在html标记中。

<compound objectid="controll.compoundId"></compound>

 scope: {             
        objectid:'=objectid'
    },

编辑：乍一看，你的代码中有很多错误。我没有真正理解你的代码应该如何工作，但我做了一个工作plunker。希望这有帮助

使用AngularJS，如何将控制器范围传递给指令html模板

1 个答案: