Question

我需要使用Angular.js将值从数组传递到指令范围。我的代码如下所示。

的test.html：

imState = imState.update(
  ['app', 'line', 'series'],
  series => series.map(s => s.update('color', color => "#1bf115"))
)

test.js：

<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>

数组中存在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是一个数组，其中包含你的html页面控制器中定义的mp3曲目。

这是angularjs指令文档，您可以找到隔离范围使用的另一个示例。

如何使用Angular.js将值传递给指令隔离范围

1 个答案: