修改指令中的模型

自定義指令使用服務方法爲模型創建新的修改模型。修改指令中的模型

問題是新模型根本沒有註冊。

boo是模型

欣賞你的幫助自定義屬性。

使用指令控制器小提琴

模板：

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

來源

2015-06-14 kidwon

隨着指令的隔離範圍，我不認爲甚至噓聲可以在HTML訪問。 – nikhil

，因爲你的指令使用隔離範圍，沒有任何模板中指定的指令元素含量不會得到默認的隔離範圍它不會這樣的。簡單的方法設置父範圍來處理夫妻：

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

來源

2015-06-14 16:27:53 PSL

非常感謝您 – kidwon

@kidwon歡迎您.. – PSL

這種感覺就像你真正應該定義你的指令的內容作爲它的模板。對於內嵌例如：

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/

來源

2015-06-14 16:37:30

修改指令中的模型

回答

相關問題