Question

我想使用指令来显示一组数据。为此，我做了一个像这样的元素：<jobs type="1" />;属性类型确定用户应该看到的作业类型，并在我的模板中过滤我有以下代码：<div ng-repeat="job in jobs | filter:{'type':type}">{{job.title}}</div>。

我遇到的问题是我无法弄清楚如何从我的元素中获取属性值并将其与我的服务结果一起推送而不会产生角度生气。

我的指示：

angular.module('myApp').directive('jobs', jobsDirective);

jobsDirective.$inject = ['jobService','$scope','$sce'];


    function jobsDirective(jobService, $scope, $sce) {

        //this return results
        var jobs = jobService.getAllJobs().success(function (data, status, headers, config) {
            return data;
        });


        return {
            restrict:'E',
            replace:true,
            templateUrl:'templates/jobs.html',
            scope: {    
                type:'@'
            },
            link: function(scope){
                scope.jobs = jobs;
            }
        }
    }

Answer 1

这里是一个使用控制器获取type属性的代码。请注意，在指令定义中使用bindToController属性，可以通过作用域服务和controllerAs别名访问type属性，在本例中称为ctrl。

angular
  .module('myApp')
  .directive('jobs', jobsDirective);

    function jobsDirective() {

        return {
            restrict:'E',
            replace:true,
            controller: jobsCtrl,
            controllerAs: 'ctrl',
            bindToController: true,
            templateUrl: 'templates/jobs.html',
            scope: {    
                type:'@'
            }
        }
    }

    jobsCtrl.$inject = ['$scope', 'jobService'];

    function jobsCtrl($scope, jobService, $sce) {
        var vm = this,
        type = $scope.ctrl.type; 
        //USE THE TYPE ATTRIBUTE TO GET THE JOBS ACCORDING THE TYPE 
        jobService.getAllJobs(type).success(function (data, status, headers, config) {
            vm.jobs = data;
        });

    }

Answer 2

这是工作代码;我刚为指令添加了一个控制器。

"use strict";
/*
e.g. <jobs type="1" />
*/
angular.module('myApp').directive('jobs', jobsDirective);
angular.module('myApp').controller("jobsCtrl" ,jobsCtrl);

    jobsCtrl.$inject = ['$scope', 'jobService'];

    function jobsCtrl($scope, jobService, $sce) {

        jobService.getAllJobs().success(function (data, status, headers, config) {
            $scope.jobs = data;
        });

    }

    function jobsDirective() {

        return {
            restrict:'E',
            replace:true,
            controller: 'jobsCtrl',
            templateUrl:'templates/jobs.html',
            scope: {    
                type:'@'
            }
        }
    }

从角度指令

2 个答案: