Question

我的控制器和指令有问题。首先，我无法在指令初始化指令之后使用数据（但在控制器内）。

例如我有一个获取一些信息的按钮，这个信息作为城市返回，但我不能用城市填充选择元素

当我的指令中没有controller:时，

无法访问控制器的范围。

不能通过attrs.model传递模型只是双向绑定工作！

无法将控制器的$scope传递给指令（我在我的指令scope中声明了一个名为 vm 的属性）并使用它。

一些信息：我有一个可重用的控制器，它有一个getAll方法，可以调用我的服务getAll从数据库中获取数据。

有一个使用很多时间并使用getAll进行初始化的指令。

我的错？

我需要一个服务来获取/操作数据，控制器来获取/检查数据，指令来获取/显示数据。

和{im beginner to angular，给我一些关键词来搜索它们，以帮助我实现目标}

请原谅我的硬编码，我只是测试一切来解决我的问题。

这是我的 html 代码：

<div class="well well-lg" ng-controller="listController" ng-show="IsLoggedIn">

    <list-data type="" init="getAll('Person')"  model="person" data="FullName"></list-data><br />
    <list-data type="multiple" init="getAll('City')" model="city" data="Name"></list-data><br />

    <p ng-show="person.Id > 0"><strong>{{person.FullName}}</strong><il ng-show="city.length > 0"> is Citizen of <strong>{{ city | nameOfObject }}</strong>?</il></p>
    <button class="btn btn-primary" ng-click="setRelation(person.Id,city)">Set Relation</button>
</div>

<div class="well well-lg" ng-controller="listController as myvm" ng-show="IsLoggedIn">

    <list-data init="getAll('Person')" model="person" data="FullName"></list-data>
    <list-data model="city" data="Name"></list-data>

    <button class="btn btn-primary" ng-click="getRelations(person.Id)">Get Relation</button><br />
    <p ng-show="person.Id > 0"><strong>{{person.FullName}}</strong><il ng-show="city.length > 0"> is Citizen of <strong>{{city | nameOfObject}}</strong>.</il></p>

</div>

这是我的控制器：

    (function (app) {
    app.controller('listController', ['$scope', '$http','$q', 'listService','dal', function ($scope, $http, $q, listService,dal) {

        var vm = this;

        $scope.getAll = function (classname) {
            listService.getAll(classname)
                .success(function (data) {
                    $scope.result = data;
                })
                .error(function (data, status) {
                    console.log("Error 001: Can Not Load Data.",status);
                });
        }


        $scope.getRelations = function (pid) {
            var cities = [];
            listService.getRelations(pid)
                .success(function (data, status) {
                    $scope.citizenship = data;
                    var city;
                    for (var item in data) {
                        listService.getById('City', data[item].CId)
                            .success(function (data, status) {
                                city = data;
                                cities.push(city);
                            })
                            .error(function (data,status) {
                                console.log(data,status);
                            });
                    }
                    $scope.city = cities;
                    console.log($scope);
                })
                .error(function () {
                    console.log("Error 002: Can Not Load Data.", status);
                })
        }

        var addedCities = '', existCities = '', name = '', message = '';

        //Set relation between persons and cities
        $scope.setRelation = (function (pid, city) {
            if (city !== undefined && pid !== undefined) {
                if (city.length !== undefined && city.length > 0 && (pid != null || pid !== undefined)) {
                    for (var i = 0; i < city.length; i++) {
                        name = city[i].Name;
                        listService.setRelation(pid, city[i].Id)
                            .then(function (data, stsus) {
                                message = '';
                                if (status == 200) {
                                    addedCities += name + ', ';
                                }
                                else {
                                    existCities += name + ', ';
                                }
                                if (addedCities.length > 0) {
                                    message += addedCities + ' added succesfully.\n';
                                }
                                if (existCities.length > 0) {
                                    message += existCities + ' are exists.'
                                }
                            });
                    }

                    if (message.length > 0) {
                        window.alert(message);
                        addedCities = '';
                        existCities = '';
                        name = '';
                        message = '';
                    } else {
                        //
                    }

                }
                else {
                    window.alert("Please select at least one Person and one City");
                }
            }

        })


    }]);

}(angular.module('app')));

和我的指令代码：

    (function (app) {

    var template = function (element, attrs) {
        var htmltext =

            '<select ' + attrs.type +
            ' style="width:300px" ng-init="' + attrs.init +
            '" ng-model=model ng-options="value.' + attrs.data +
            ' for value in result"></select><br \>';

        return htmltext;
    };

    app.directive('listData', ['listService', function (dal) {
        return {
            restrict: 'E',
            controller: 'listController',   //if comment this line, directive will not work
            scope: {
                vm: '=',                    //if comment this line, directive will not work
                model: '='                  
            },
            template: template,
        }
    }]);
}(angular.module('app')));

Answer 1

只有一种方法可以访问控制器中的隔离范围。这个东西叫做Two way data binding。

如果是create指令，有很多方法可以定义范围。

如果你没有定义范围，那么默认设置为scope: false当范围设置为false时，这意味着指令使用它的父范围和指令没有它自己的范围只适用于父范围。

如果设置scope: true，则指令具有自己的范围，但也可以访问父范围。

和

如果您定义范围如scope:{ name: '=', city: '@', address: '&' }

它意味着指令在隔离范围指令中创建隔离范围具有它自己的范围，并且不访问它的父范围。用于与控制器/父隔离范围通信有一些前缀我们使用'=', '@', '&' '='用于双向数据绑定t '@'用于初始值，如果你从父或where指令获取调用和'&'用于访问方法或callback。 more details

如何与$ scope of controller

1 个答案: