Question

新角度。我有一个自定义指令，基本上是一个表单，当点击一个专辑中的一个曲目时发生点击事件时我想调用它。像这样：

- album1  
   *album1-track1
   *album1-track2
- album2

所以当我点击Album1时，我将显示album1的曲目。当我点击album2时，我将显示album2的曲目而不是album1的曲目。现在，当我点击专辑2的曲目时，我想显示表格（定义为自定义指令）。像这样：

 - album1  
   *album1-track1  ---> (this track clicked) -----> (form displayed)
   *album1-track2
- album2

这是我的代码：

// HTML
<div class="wrapper wrapper-content">
<div>
    <ul>
        <li ng-repeat="album in vm.albums">
            <a ng-click="vm.getAlbumTracks(album, $index)">{{album}}</a>
            <ul ng-show="$index === vm.showingAlbumIndex">
                <li ng-repeat="track in vm.albums.tracks"><a ng-click="vm.displayForm(track)">{{track}}</a></li>
            </ul>
        </li>
    </ul>
    <metadata-form></metadata-form>
    <a ng-click="vm.newFunction('RAVI')">Click Me!</a>
</div>

控制器：

(function (){

angular.module('app.fileUploadForm').controller('FileUploadFormController', FileUploadFormController);

FileUploadFormController.$inject = ['$http', '$log', '$scope', '$state', '$rootScope', 'APP_CONFIG'];
function FileUploadFormController ($http, $log, $scope, $state, $rootScope, APP_CONFIG){

    var vm = this;
    vm.albums = init;
    vm.getAlbumTracks = getAlbumTracks;
    vm.newFunction = newFunction;
    vm.displayForm = displayForm;

    return init();

    function init(){

        $http.get('http://localhost:8080/api/albums').then(function(responseData){
            // Parse the json data here and display it in the UI
            vm.albums = [];
            for(var album in responseData.data)
                $scope.vm.albums.push(album);
            $log.debug(angular.toJson(responseData, true));
        })
    }

    function getAlbumTracks(album, index){
        $http.get('http://localhost:8080/api/albums/'+album).success(function(trackResponse){
            //parse each album and get the track list
            //alert('Function getAlbumTracks () called');
            vm.showingAlbumIndex = index;
            vm.albums.tracks = [];

            for(var i = 0; i<trackResponse.tracks.length; i++)
                vm.albums.tracks.push(trackResponse.tracks[i].title);
            $log.debug(vm.albums.tracks);
        })
    }


    function displayForm(track, index){
        // display the form for that track only
    }

    function newFunction(name){
        $log.debug("Hello " + name);
    }
}


})();

Custom directive.js

(function (){

'use strict';

angular.module('app.fileUploadForm').directive('metadataForm', metadataForm);

function metadataForm(){
    return {
        restrict: 'EA',
        templateUrl: 'app/fileUploadForm/metadata-form.html'
    };
};


})();

metadata-form.html文件：

<div ng-show="showForm">
<form name="uploadForm" ng-controller="FileUploadFormController as uploadCtrl">
    <br>UPC:<br>
    <input type="text" ng-model="UPC">
    <br>
    <br>Artist:<br>
    <input type="text" ng-model="artist">
    <br>
    <br>Genre:<br>
    <input type="text" ng-model="genre">
    <br>
    <br>Album:<br>
    <input type="text" ng-model="album">
    <br>
    <br>Hold Date:<br>
    <input type="text" ng-model="holddate">
    <br>
    <br>SomeField:<br>
    <input type="text" ng-model="somefield">
</form>
<!-- trying the date picker here
        <h4>Standard date-picker</h4>
        <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
--><br>
<button class="btn btn-primary block m-b" ng-click="uploadFile()">Send to Ingestion</button>

知道如何实现这个目标吗？

Answer 1

首先，我认为您的自定义指令不应该使用第一个代码的相同控制器。删除metadataForm中的ngController指令。

使用数据绑定在调用指令时获取跟踪信息：

(function (){
  'use strict';
  angular.module('app.fileUploadForm').directive('metadataForm', metadataForm);
  function metadataForm(){
    return {
      restrict: 'EA',
      templateUrl: 'app/fileUploadForm/metadata-form.html',
      scope: {}, // Isolated scope
      bindToController: {
        track: '='
      }
      controller: controllerFunc
      controllerAs: 'vm'
    };

    function controllerFunc() {
      var vm = this;
      // Your track is accessible at vm.track
    }
  };
})();

您必须更改metadataForm模板中的ng-model以将数据与控制器中的数据绑定。

要在单击时显示metadataForm指令，可以使用ng-if指令：

// HTML
<div class="wrapper wrapper-content">
<div>
    <ul>
        <li ng-repeat="album in vm.albums">
            <a ng-click="vm.getAlbumTracks(album, $index)">{{album}}</a>
            <ul ng-show="$index === vm.showingAlbumIndex">
                <li ng-repeat="track in vm.albums.tracks"><a ng-click="vm.displayForm(track)">{{track}}</a></li>
            </ul>
        </li>
    </ul>
    <metadata-form ng-if="vm.isFormDisplayed" track="vm.displayedTrack"></metadata-form>
    <a ng-click="vm.newFunction('RAVI')">Click Me!</a>
</div>

在你描述的控制器中：

function displayForm(track, index){
  vm.isFormDisplayed = true;
  vm.displayedTrack = track;
}

AngularJS在ng-click上调用自定义指令（A表单）

1 个答案: