无法以角度方式访问指令中的服务

时间:2016-08-25 11:40:13

标签: angularjs angular-directive angular-services

我是角色新手,陷入了一个概念问题。我无法在“helloWorld”指令中访问“游戏”服务。

expected =姓名:WarCraft

实际=姓名:

这是我的js和html文件:

JS代码:

var app = angular.module("app",[]);

app.provider("game", function () {
    var type;
    return {
        setType: function (value) {
            type = value;
        },
        $get: function () {
            return {
                title: type + "Craft"
            };
        }
    };
});

app.config(function (gameProvider) {
    gameProvider.setType("War");
});

app.controller("AppCtrl", function ($scope,game) {
    $scope.title = game.title;
});

app.directive('helloWorld', ["game",function (game) {
    return {
        template: 'Name : {{game.title}}'
    };
}])

HTML:

<title>Services</title>
<script src="angular.min.js"></script>
<script src="my-file.js"></script>
</head>
    <body ng-app="app">

        <div ng-controller="AppCtrl">{{title}} </div>
        <hello-world></hello-world>
    </body>

3 个答案:

答案 0 :(得分:1)

类似的东西:

  app.directive('helloWorld', ["game",function (game) {
  return {
  restrict: 'E',
  scope: {},
  link: function (scope, elem, attrs, ctrl) {
    scope.title = game.title;
  },
  template: 'Name : {{title}}'
};
}])

答案 1 :(得分:0)

访问controller中的游戏服务,该服务将在template中提供。如果仅在template中需要,请仅在controller中注入... link或其他功能无需知道。

app.directive('helloWorld', function () {
    return {
        controller: function($scope, game) {
           $scope.game = game;
        },
        template: 'Name : {{game.title}}'
    };
}])

答案 2 :(得分:0)

这是http://caniuse.com/#feat=css-backgroundblendmode上的解决方案,可以玩。

只需输入将由视图使用的define变量并设置为所需的值。

<table>
  <tr>
    <td>Number</td>
    <td>Name</td>
  </tr>
  <tr class="reviewed">
    <td>1</td>
    <td>Reviewed</td>
  </tr>
  <tr class="reviewed deleted">
    <td>2</td>
    <td>Reviewed and deleted</td>
  </tr>
  <tr class="deleted">
    <td>3</td>
    <td>Deleted</td>
  </tr>
</table>