訪問angularjs中自定義指令內控制器中定義的函數

Question

我是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: "&"
    }
  }
});

我無法訪問formattedAddress中訪問person對象。

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>

Answer 1

使用ng-controller指令引用你的控制器刪除對main的引用：

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

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

在您的控制器中將formattedAddress和person設置為$ scope，如下所示：

$scope.formattedAddress = function(person) {
  return person.address + ', ' + person.city + ', ' + person.state + ' ' + person.zip;
};

Answer 2

您應該使用角度過濾器。 用於限制單詞字母的示例過濾器。

angular.module('app').filter('limitLetters', function() {
    /**
     * Limits the letters of the input string
     * @param value {string} the string to be limited
     * @param max {number} the max number of letters allowed
     */
    return function(value, max) {
        if (!value) return '';
        max = parseInt(max, 10);
        if (!max) return value;
        if (value.length <= max) return value;
        value = value.substr(0, max);
        return value + ' …';
    };
});