访问angularjs

时间:2016-06-27 05:15:47

标签: javascript angularjs

我是AngularJS的新手。我在定义方法和属性时遵循控制器作为语法。我刚刚创建了一个自定义指令来显示人们的搜索结果。我在我的自定义指令搜索结果中定义了一个控制器内部的方法。如何使用controller作为语法访问我的自定义指令中的formattedAddress函数。

app.js

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

myApp.config(function($routeProvider) {

  $routeProvider
    .when('/', {
      templateUrl: 'pages/main.html',
      controller: 'mainController',
      controllerAs: 'main'
    })

  .when('/second', {
    templateUrl: 'pages/second.html',
    controller: 'secondController',
    controllerAs: 'second'
  })

  .when('/second/:num', {
    templateUrl: 'pages/second.html',
    controller: 'secondController',
    controllerAs: 'second'
  })

});

myApp.controller('mainController', ['$scope', '$log',
  function($scope, $log) {

    var self = this;

    self.people = [{
      name: 'John Doe',
      address: '555 Main St.',
      city: 'New York',
      state: 'NY',
      zip: '11111'
    }, {
      name: 'Jane Doe',
      address: '333 Second St.',
      city: 'Buffalo',
      state: 'NY',
      zip: '22222'
    }, {
      name: 'George Doe',
      address: '111 Third St.',
      city: 'Miami',
      state: 'FL',
      zip: '33333'
    }];

    self.formattedAddress = function(person) {

      return person.address + ', ' + person.city + ', ' + person.state + ' ' + person.zip;

    };

  }
]);

myApp.controller('secondController', ['$scope', '$log', '$routeParams',
  function($scope, $log, $routeParams) {



  }
]);

myApp.directive("searchResult", function() {
  return {
    restrict: 'EA',
    templateUrl: 'directives/searchresult.html',
    replace: true,
    scope: {
      personObject: "=",
      formattedAddressFunction: "&"
    }
  }
});

我无法访问formatAddress内的访问人员对象。

main.html中

<label>Search</label>
<input type="text" value="Doe" />

<h3>Search Results</h3>
<div class="list-group">
  <search-result person-object="main.person" formatted-address-function="main.formattedAddress(aperson)" ng-repeat="person in main.people"></search-result>
</div>

searchresult.html

<a href="#" class="list-group-item">
  <h4 class="list-group-item-heading">{{ personObject.name }}</h4>
  <p class="list-group-item-text">
    {{ formattedAddressFunction({ aperson: personObject }) }}
  </p>
</a>

2 个答案:

答案 0 :(得分:0)

使用ng-controller指令引用你的控制器删除对main的引用:

{
    "manifest_version": 1,      
    "name": "Your Extension",
    ...

    "permissions": [
        ....
        "http://localhost:1234/"
    ]
}

在您的控制器中将formattedAddress和person设置为$ scope,如下所示:

{{1}}

答案 1 :(得分:0)

你应该使用角度过滤器。用于限制单词字母的示例过滤器。

    String json = "{\"name\": \"Test by JSON 1\",\"description\": \"Test by JSON 1\",\"fields\": {\"field\": []},\"typeDefinitionId\": \"23\",\"primaryParentId\": \"26982\"}";
    String url = "http://serv23/api/contents";      
    URL obj = new URL(url);

    HttpURLConnection con = (HttpURLConnection) obj.openConnection();

    //Setting the Request Method header as POST
    con.setRequestMethod("POST");

    //Prepairing credentials
    String cred= "user123:p@ssw0rd";
    byte[] encoded = Base64.encodeBase64(cred.getBytes());           
    String credentials = new String(encoded);

    //Setting the Authorization Header as 'Basic' with the given credentials
    con.setRequestProperty  ("Authorization", "Basic " + credentials);

    //Setting the Content Type Header as application/json
    con.setRequestProperty("Content-Type", "application/json");

    //Overriding the HTTP method as as mentioned in documentation   
    con.setRequestProperty("X-HTTP-Method-Override", "POST");

    con.setDoOutput(true);

    JSONObject jsonObject = (JSONObject)new JSONParser().parse(json);

    OutputStream os = con.getOutputStream();
    os.write(jsonObject.toJSONString().getBytes());

    os.flush();
    WriteLine( con.getResponseMessage() );
    int responseCode = con.getResponseCode();