Question

我正在制定一个指令来创建自定义下拉列表。我已设法带上指令代码以取代它。

以下是html

中的指令标记

<dropdown placeholder="Country.." list="count" selected="item" property="name"></dropdown>

下面是替换指令标记

的html模板

<div class="dropdown-container" ng-class="{ show: listVisible }">
<div class="dropdown-list">
    <div>
        <div ng-repeat="item in list" ng-click="select(item)" ng-class="{ selected: isSelected(item) }">
            <span>{{property !== undefined ? item[property] : item}}</span>
            <i class="fa fa-check"></i>
        </div>
    </div>
</div>

下面是angularjs指令

App.directive("dropdown", function ($rootScope) {
return {
    restrict: "E",
    templateUrl: "/app/dropdownTemplate.html",
    scope: {
        placeholder: "@",
        list: "=",
        selected: "=",
        property: "@"
    },
    link: function (scope) {
        scope.listVisible = false;
        scope.isPlaceholder = true;

        scope.select = function (item) {
            scope.isPlaceholder = false;
            scope.selected = item;
        };

        scope.isSelected = function (item) {
            return item[scope.property] === scope.selected[scope.property];
        };

        scope.show = function () {
            scope.listVisible = true;
        };

        $rootScope.$on("documentClicked", function (inner, target) {
            console.log($(target[0]).is(".dropdown-display.clicked") || $(target[0]).parents(".dropdown-display.clicked").length > 0);
            if (!$(target[0]).is(".dropdown-display.clicked") && !$(target[0]).parents(".dropdown-display.clicked").length > 0)
                scope.$apply(function () {
                    scope.listVisible = false;
                });
        });

        scope.$watch("selected", function (value) {
            scope.isPlaceholder = scope.selected[scope.property] === undefined;
            scope.display = scope.selected[scope.property];
        });
    }
}
});

我试图从其他控制器获取国家列表，其功能如下，

addressService.getCountries().success(function (response) {
    angular.copy(response, $scope.list);
}

当页面加载时，如何将控制器中的值绑定到我的指令？

编辑：在调用函数addressService.getCountries()之前加载指令我该怎么做？

Answer 1

您可以创建一个在整个项目中非常有用的工厂，以便随时随地访问变量，在任何控制器或任何指令中您都可以轻松访问该变量

这就是我们如何制造工厂，

(function() {
"use strict";
angular.module('dataModule',[])
.factory('datafactory',function(){
 return {
 credentials : {},
 };
 });
 })();

完成此工厂后，您可以将此模块注入模块，将此工厂注入控制器

只要你愿意，你就可以使用

addressService.getCountries().success(function (response) {
datafactory.country = response
}

控制器中的

$scope.myvar =datafactory.country

将来你可以将这个工厂用于任何可以在任何地方访问的变量，例如你想要存储全局状态列表

datafactory.state =["abc","def","xyz"]

如何将值绑定到angularjs指令？

1 个答案: