如何使用Angular.js將值傳遞給指令隔離范圍

Question

我需要使用Angular.js將值從數組傳遞到指令范圍。 我的代碼如下所示。

的test.html：

<html><head>
<!--music_append_class-->
<script src="js/angular.min.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="formComponents">
    <form-input label="Name" form-id="nameInput">
      <input type="text" name="ind" id="ind" ng-model="index">
      <button type="button"  id="btn" ng-click="playAudio(index);">Play</button>
    </form-input>
</body>
</html>

test.js：

var app=angular.module('formComponents', [])
app.directive('formInput', function($document) {
    var audio = $document[0].createElement('audio');
    var trackList=[{'track':'audio_file.mp3'},
                   {'track':'audio_file1.mp3'},
                   {'track':'audio_file2.mp3'},
                   {'track':'audio_file3.mp3'}];
    return {
        restrict: 'E',
        scope: { src: '='},
    }
})

數組中有mp3列表，我的要求是用戶僅在文本字段中輸入索引值，然后單擊“播放”按鈕。 該索引值將與該mp3數組列表匹配，並且將播放該特定曲目。 我需要使用指令。

Answer 1

您必須創建一個html屬性才能將數組傳遞到指令中，這是一個示例：

外形input.directive.js：

app.directive('formInput', function() {
    return {
        restrict: 'E',
        scope: {
            mp3Track: '='
        },
        controller: formInputCtrl,
        transclude: true,
        templateUrl: './form-input.html'
    };
});

formInputCtrl.$inject = ['$scope'];

function formInputCtrl($scope) {
    $scope.playAudio(index) = playAudio;

    function playAudio(index) {
        var track = $scope.mp3Track[index];

        // DO OTHER STUFF WITH THE TRACK
    }
}

外形input.html：

<div class="audio-input" ng-transclude>
    // input and button will be inserted here by angularjs
</div>

index.html的：

<form-input label="Name" form-id="nameInput" mp3-track="mp3Array">
  <input type="text" name="ind" id="ind" ng-model="index">
  <button type="button"  id="btn" ng-click="playAudio(index);">Play</button>
</form-input>

mp3Array是一個數組，其中mp3曲目在html頁面訪問的控制器中定義。

這是angularjs指令文檔，您可以找到隔離范圍使用的另一個示例。

如何使用Angular.js將值傳遞給指令隔離范圍

問題描述

1 個解決方案

解決方案1
0 2017-09-04 12:40:57

如何使用Angular.js將值傳遞給指令隔離范圍

問題描述

1 個解決方案

解決方案1 0 2017-09-04 12:40:57

解決方案1
0 2017-09-04 12:40:57