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

我需要使用Angular.js將值從數組傳遞到指令範圍。我的代碼如下所示。如何使用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數組列表匹配並且該特定曲目將播放。我需要使用指令。

來源

2017-09-04 subhra

你必須創建一個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指令文檔，你可以找到隔離範圍使用的另一個例子。

來源

2017-09-04 12:40:57

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

回答

相關問題