Question

我正在创建一个单向绑定指令，其中包含一个包含数组的属性，如下所示：

app.directive('interestBox', function() {
    return {
        restrict: 'E',
        scope: {
            interests: '@'
        },
        templateUrl: '/static/templates/directive_templates/interestbox.html',
        link: function(scope, element, attrs) {
            scope.interests = scope.$eval(scope.interests); //currently, doing this for converting string to array
            console.log(scope.interests);
        }
    }
})

这里是标记：

<interest-box interests="{{profile_data.interests}}">
</interest-box>

控制器：

$scope.profile_data.interests = [1, 2, 3, 4];

首先，我使用@而不是=的原因是我不需要在我的控制器和指令之间进行双向绑定（我对此有正确的意见假设吗）

但是就像你拥有它一样，@将DOM值当时解析为字符串。现在，因为我的属性＆＃39;兴趣＆＃39;是一个数组，我需要将它转换为一个数组，从一个字符串（@将其转换为）在指令中。为此我正在做：

$scope.interests = scope.$eval(scope.interests);

这对我来说并不合适。从字符串中获取数组的最佳方法是什么？

Answer 1

您希望在指令中拥有原始数组的副本以进行操作。修改后的数据就绪后，您可以使用隔离的本地数据更新原始控制器阵列。在您的情况下，它将如下所示：

＆＃13;

angular.module('demo', [])
.controller('DemoController', function($scope, $timeout) {
    $scope.profile_data = {interests: [1,2,3]};
    $timeout(function() {$scope.profile_data.interests.push(4);}, 1000);
})

.directive('interestBox', function($timeout, $parse) {
    return {
        restrict: 'E',
        scope: {
            interestsOrig: '=interests'
        },
        template: '<pre>{{ interests }}</pre><button ng-click="updateInterests()">Update controller array</button>',
        link: function(scope, element, attrs) {
            
            scope.interests = angular.copy(scope.interestsOrig);
            
            // Modify interests, push new, remove old
            $timeout(function() {
                scope.interests.push(5); 
                scope.interests.splice(0, 1)
            }, 2000);
            
            // Update original controller interests with local
            scope.updateInterests = function() {
                scope.interestsOrig = scope.interests;
            };
        }
    }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>

<div ng-app="demo" ng-controller="DemoController">

    <h4>Controller</h4>
    <pre>{{ profile_data.interests }}</pre>

    <h4>Directive</h4>
    <interest-box interests="profile_data.interests"></interest-box>

</div>

＆＃13;

Answer 2

将变量从一种类型共享到另一种类型然后执行投射

总是错误的

根据AngularJS Doc，当您将指令定义对象的范围属性声明为Object时，您将获得具有隔离范围的指令 ...

在这种情况下，我认为，您不需要隔离范围，只需要儿童范围。使用子作用域创建指令时，父作用域的值将复制到新的子作用域...

＆＃13;

angular
  .module('test', [])
  .controller('ProfileCtrl', function($scope) {
    var vm = $scope;
  
    vm.interests = [1, 2, 3, 4, 5, 6];
  })
  .directive('interests', function() {
  
    function InterstsPostLink(iScope, iElement, iAttributes) {
      iScope.interests = [].concat(iScope.interests)
      iScope.addInterest = function(val) {
          iScope.interests.push(val)
      };
      
      iScope.newInterest = 'Hello';
    }
  
    var ddo = {
      templateUrl: 'interests-list',
      link: InterstsPostLink,
      scope: true
    };
    return ddo;
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<article data-ng-app="test">
  <div data-ng-controller="ProfileCtrl">
    
    <h3>ProfileCtrl Value</h3>
    <div ng-bind="interests | json"></div>
    <hr />
    
    
    <div interests></div>
  </div>
  
  <script type="text/ng-template" id="interests-list">
    <h3>Directive Value</h3>
    <div ng-bind="interests | json"></div>
    <input type="text" ng-model="newInterest">
    <button ng-click="addInterest(newInterest)">Add</button>
  </script>
</article>

＆＃13;

AngularJS指令：以单向绑定方式解析字符串中的数组

2 个答案: