Question

我是AngularJS的新手，我使用服务从后端获取数据并在控制器中接收它，现在我必须解析这些值并在指令中动态创建元素，当我尝试这样做时，我得到{ {1}}表示控制器中的值。

app.js：

undefined

directiveExample.js

var app = angular.module('childAid', ["myDirectives"]);
app.controller('headerController', function($scope, headerFactory) {
    debugger
    headerFactory.getAllChallenges()
        .then(function(data) {
            $scope.challengeslist = data.header;
        });
});

serviceExample.js：（function（）{

var myDirectives = angular.module('myDirectives', []);

myDirectives.directive('headerPicker', function() {
    return {
        restrict: 'AE',
        templateUrl: 'component/views/header.html',
        link: function($scope, element, attributes) {
            console.log('linking foo ' + $scope.challengeslist);
        }
    };
});

的index.html：

 angular .module('childAid').factory('headerFactory', headerFactory);

  function headerFactory($http) {
     function getAllChallenges() {
      debugger
      return $http
      .get('resources/stubs/details_tree.json')
      .then(complete)
      .catch(failed);
  }

  // helper function to handle the resolved promise
  function complete(response) {
    debugger
   return response.data;
  }

  // helper function to handle the rejected promise
  function failed(error) {
    console.error(error.statusText);
  }

  return {
    getAllChallenges: getAllChallenges
  };
}

headerFactory.$inject = ['$http']; })();

我不知道我在哪里做错了，请帮助我成为AngularJS的新手。

Answer 1

您是否尝试在指令中使用隔离范围。如果您尝试过类似的东西，它可能会更容易。

DEMO

显然我无法访问你的api所以我使用公共虚拟api嘲笑它，所以你必须修改它以使用你自己的服务器。

重要的一点是..

return {
        restrict: 'AE',
        templateUrl: 'header.html',
        scope: {
          'challengesList' : '='
        }
    };

在你的指令中

..和

<header-picker challenges-list='challengesList'></header-picker>

..在你的HTML中。

以下是整个参考资料。希望你觉得它有用。对不起，如果你已经尝试过这个。

<强> app.js

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

app.controller('headerController', function($scope, headerFactory) {
    debugger

    headerFactory.getAllChallenges()
        .then(function(response) {
            $scope.data = response;
            // $scope.challengesList = data.header;

            // dummy response has a data.title property, 
            $scope.challengesList = response.data.title;
        });
});

angular
  .module('childAid')
  .factory('headerFactory', headerFactory);

headerFactory.$inject = ['$http']; 

function headerFactory($http) {

  function getAllChallenges() {
    debugger

    // var url = 'resources/stubs/details_tree.json';

    // dummy api for demo purposes, obviously delete this 
    // and uncomment your own url for your own app

    var url = 'http://jsonplaceholder.typicode.com/posts/1';

    return $http
      .get(url)
      .catch(failed);
  }

  // helper function to handle the rejected promise
  function failed(error) {
    console.error(error.statusText);
  }

  return {
    getAllChallenges: getAllChallenges
  };

}

var myDirectives = angular.module('myDirectives', []);

myDirectives.directive('headerPicker', function() {
    return {
        restrict: 'AE',
        templateUrl: 'header.html',
        scope: {
          'challengesList' : '='
        }
    };
});

<强>的index.html

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-app="childAid" ng-controller="headerController"> 
    <pre>{{data}}</pre>
      <div class="container">
        <h2>Displaying Header</h2>
        <header-picker challenges-list='challengesList'></header-picker>
      </div>
    </div>
  </body>

</html>

<强> header.html中

<p>challengeslist = {{challengesList}}</p>

无法从AngularJS中的控制器指令访问范围

1 个答案: