Угловая директивная модель привязки

Я только что открыл AngularJS и нахожусь в том, что кажется довольно крутой кривой обучения. Может ли кто-нибудь порекомендовать пару хороших книг, которые примут «практическое» погружение в AngularJS. Мой программирования вопрос:Угловая директивная модель привязки

Рассмотрим:

<input type="text" name="inputField1" ng-model="myModel.firstName" 
     encrypt-and-save="myModel.encryptedFirstName" />

В моей директиве под названием «encryptAndSave» Я хочу, чтобы динамически связать с моделью свойства, имя (в данном случае) «encryptedFirstName». Все, что я прочитал, кажется, говорит, что это возможно, но я не нашел конкретного примера того, как это делается. Любую помощь/указатели будут очень благодарны.

Спасибо заранее, Джимми

Вот что я ликвидируется делать. Я обнаружил $ parse и .assign. Я использовал параметр $ parse при инициализации и .assign для связывания в конце/в реальном времени. Имеет ли это смысл, или я что-то пропустил? снова

app.directive('encryptAndSave', function($parse) { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     link: function(scope, element, attrs, ctrl) { 
      var encryptedModelValue = $parse(attrs.encryptAndSave); 
      // 
      // wait for model change (could also wait for blur??) 
      // 
      scope.$watch(attrs.ngModel, function(newValue, oldValue) { 
       var encrValue = encryptThis(newValue); 
       encryptedModelValue.assign(scope, encrValue); 
      }); 
     } 
    }; 
});

Спасибо за вашу помощь, Джимми

источник

2015-03-17 JConnell

Если вы связали это правильно, вы должны просто использовать {{encryptedFirstName}} для привязки в своей разметке. – lintmouse

Мне нравится [Angular JS: Новичок для ниндзя] (http://www.amazon.com/AngularJS-Novice-Ninja-Sandeep-Panda/dp/0992279453). –

В вас директиве создать изолированную область применения и использовать 2 способа связывания с помощью '='

scope: { 
     encryptAndSave: '=' 
    }

Пожалуйста, смотрите демо ниже

var app = angular.module('app', []); 
 

 
app.controller('firstCtrl', function($scope) { 
 
    $scope.myModel = { 
 
    firstName: "joe", 
 
    encryptedFirstName: " encrypted joe" 
 

 
    }; 
 
}); 
 

 
app.directive('encryptAndSave', function() { 
 
    return { 
 
    scope: { 
 
     encryptAndSave: '=' 
 
    }, 
 
    link: function(scope, elem, attr) { 
 

 

 
     alert(scope.encryptAndSave) 
 
    } 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="app"> 
 
    <div ng-controller="firstCtrl"> 
 
    <input type="text" name="inputField1" ng-model="myModel.firstName" encrypt-and-save="myModel.encryptedFirstName" /> 
 
    </div> 
 
</body>

источник

2015-03-17 22:34:10 sylwester

Я все о наблюдателях за этот. Причина в том, что вы не можете получить доступ к динамическим членам родительской области с использованием изолированной области. Возможно, я ошибаюсь, но похоже, это то, что вы пытаетесь сделать.

angular.module("encryptMe", []) 
.directive("encryptAndSave", function() { 
    function hash(name) { 
     return name; 
    } 

    return { 
     link: function(scope, element, attrs) { 
      scope.$watch("firstName", function() { 
       scope[attrs.encryptAndSave] = hash(scope.firstName + ""); 
      }); 
     } 
    }; 
}) 
.controller("encryptController", function($scope) { 
    $scope.firstName = "Who?"; 
});

Естественно, вы хотели бы более интересные вещи в вашей hash функции. Главное здесь, что эта директива обращает внимание на значение, переданное при объявлении директивы (encrypt-and-save=[your variable here]). Затем он наблюдает за переменной firstName и обновляет данную переменную родительского объекта с хешем нового значения.

Не стесняйтесь try it in a fiddle.

источник

2015-03-17 22:52:21

Угловая директивная модель привязки

ответ

Смежные вопросы