javascript - 修改指令中的模型

Question

自定义指令使用服务方法从模型中创建一个新的修改模型以用于显示目的。

问题是根本没有注册新模型。

boo 是模型的自定义属性

感谢您的帮助。

fiddle

1. https://jsfiddle.net/u24godsh/
2. https://jsfiddle.net/u24godsh/1/使用指令 Controller

模板:

<section ng-app="myApp" ng-controller="myController">
    <div my-directive boo="model">
        <div ng-model="newmodel">
            <span>Model: </span>  <b>{{model}}</b> <br/>
            <span>New Model: </span>  <b>{{newmodel || 'undefined'}}</b>
        </div>
    </div>
</section>

指令

App.directive('boo',['myService', function (myService) {
    return {
        restrict: 'A',
        scope: {
            boo: '='
        },
        link: function (scope, element, attrs) {
            scope.newmodel = myService.modifyModel(scope.boo);
        }
    };
}]).service('myService', function(){
    this.modifyModel = function(model){
        var newModel = [];

        for(var key in model) {
            newModel.push(model[key]);
        }

        return newModel;
    }
});

Controller

var ctrls = angular.module('controllers', []);
ctrls.controller('myController', ['$scope', function ($scope) {
    $scope.model = {
        a: ['a', 'a1'],
        b: ['b', 'b1']
    };
}]);

Answer 1

它不会以这种方式工作，因为您的指令使用隔离范围，并且在没有指定任何模板的情况下，默认情况下指令元素内容不会获得隔离范围。通过在父级上设置范围来处理的几种简单方法:

   scope.$parent.newmodel = myService.modifyModel(scope.boo);

或者甚至没有独立的作用域(前提是您不打算在同一作用域级别下多次使用该指令)，除非您使新属性名称 newmodel 可配置。

return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var boo = scope.$eval(attrs.boo);
            scope.newmodel = myService.modifyModel(boo);
        }
    };

或者对子作用域创建做同样的事情。

   return {
        restrict: 'A',
        scope: true,
        link: function (scope, element, attrs) {
            var boo = scope.$eval(attrs.boo);
            scope.newmodel = myService.modifyModel(boo);
        }
    };

Fiddle