Question

我正在创建Angularjs指令。但是我需要将一个参数传递给指令并在其控制器中使用它来使用$ http服务填充其项目。

我将＆＃34; listId＆＃34; 参数传递给指令，指令中的控制器期望此参数从服务器检索该列表的项目。嵌入在指令中的控制器中的代码被注释。

＆＃13;

  <script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('metadataCtrl', function ($scope, $http) {

        });

        app.directive('mydirective', function ($http) {
            return {
                restrict: 'AE',
                template: '<div ng-repeat="model in items">{{ model.name}} </div>',
                replace: true,
                scope: {
                    listId: '='
                },
                controller: function ($scope) {

                    //console.log(scope.listId);
                    //  console.log(listId);
                    //$http({ method: 'GET', url: 'http://localhost:62624/home/listvalues?listid=' }).then(function (response) {
                   // $scope.items = response.data;

                    //}, function (result) { alert("Error: No data returned"); });

                },
                link: function (scope, element, attrs) {
                    console.log(scope.listId);
                }
            };
        });


    </script>

＆＃13;

HTML代码

＆＃13;

<body ng-app="app">


    <form name="myForm" ng-controller="metadataCtrl" class="my-form">

        <mydirective list-id="99"></mydirective>

    </form>
</body>

＆＃13;

listId 可以在指令的链接（）函数中访问（我使用的是console.log（）来测试）。但是，这在控制器功能中不起作用。

Answer 1

在控制器中，使用注入$scope。

        controller: function ($scope) {
            //USE $scope
            console.log($scope.listId);
            //
            //console.log(scope.listId);

Angularjs将变量传递给指令的控制器

1 个答案: