Question

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

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

boo是模型的自定义属性

感谢您的帮助。

小提琴

https://jsfiddle.net/u24godsh/
https://jsfiddle.net/u24godsh/1/使用指令控制器

模板：

<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;
    }
});

控制器

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

Answer 2

您觉得应该将指令的内容定义为模板。对于内联示例：

App.directive('boo',['myService', function (myService) {
    return {
        restrict: 'A',
        scope: {
            boo: '='
        },
        template: '<div><span>Model: </span><b>{{boo}}</b><br/><span>New Model: </span><b>{{newmodel || \'undefined\'}}</b></div>',
        link: function (scope, element, attrs) {
            scope.newmodel = myService.modifyModel(scope.boo);
        }
    };
}]);

这也解决了你的范围问题：）

请参阅小提琴：https://jsfiddle.net/u24godsh/2/

修改指令中的模型

2 个答案: