Question

我刚刚做了这个很有意义的教程 - http://onehungrymind.com/angularjs-sticky-notes-pt-2-isolated-scope/。提供的小提琴在这里：http://jsfiddle.net/simpulton/SPMfT/

它显示了如何使用@，=和＆amp;。

将属性绑定到父控制器范围

我想改变小提琴使用＆＃34;控制器作为语法＆＃34; ，但似乎无法让它起作用，我的小提琴就在这里 - {{3 }}

关于为什么这不起作用的任何想法？

查看：

<div ng-controller="MyCtrl as ctrl">
    <h2>Parent Scope</h2>
    <input ng-model="ctrl.foo"> <i>// Update to see how parent scope interacts with component scope</i>    
    <br><br>
    <!-- attribute-foo binds to a DOM attribute which is always
    a string. That is why we are wrapping it in curly braces so 
    that it can be interpolated. 
    -->
    <my-component attribute-foo="{{ctrl.foo}}" binding-foo="ctrl.foo" 
        isolated-expression-foo="ctrl.updateFoo(newFoo)" >
        <h2>Attribute</h2>
        <div>
            <strong>get:</strong> {{isolatedAttributeFoo}}
        </div>
        <div>
            <strong>set:</strong> <input ng-model="isolatedAttributeFoo">
            <i>// This does not update the parent scope.</i>
        </div>
        <h2>Binding</h2>
        <div>
            <strong>get:</strong> {{isolatedBindingFoo}}
        </div>
        <div>
            <strong>set:</strong> <input ng-model="isolatedBindingFoo">
            <i>// This does update the parent scope.</i>
        </div>
        <h2>Expression</h2>    
        <div>
            <input ng-model="isolatedFoo">
            <button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>
            <i>// And this calls a function on the parent scope.</i>
        </div>
    </my-component>
</div>

JS：

var myModule = angular.module('myModule', [])
    .directive('myComponent', function () {
        return {
            restrict:'E',
            scope:{
                /* NOTE: Normally I would set my attributes and bindings
                to be the same name but I wanted to delineate between 
                parent and isolated scope. */                
                isolatedAttributeFoo:'@attributeFoo',
                isolatedBindingFoo:'=bindingFoo',
                isolatedExpressionFoo:'&'
            }        
        };
    })
    .controller('MyCtrl', ['$scope', function ($scope) {
        this.foo = 'Hello!';
        var self = this;
        this.updateFoo = function (newFoo) {
            self.foo = newFoo;
        }
    }]);

Answer 1

感谢JoseM的领导。我使用角度1.2和＆＃34;控制器重写了这个小提琴作为＆＃34;语法在这里： - http://plnkr.co/edit/nUXWrj4yzypaQmtJShl9?p=preview

不确定从先前版本的问题开始：

在1.2中，孤立的范围变量不能直接在DOM中使用，它们必须在指令的模板中。
我确保mydata是避免原型继承问题的对象。
使用@评估属性时，您必须确保传递它在{{}}内。

＆＃13;

var app = angular.module("drinkApp", []);

app.controller("AppCtrl", function($scope) {
  this.ctrlFlavor = {
    data: "blackberry"
  }

  var self = this;
  this.updateFoo = function(newFoo) {
    self.ctrlFlavor.data = newFoo;
  }

})

app.directive("drink", function() {

  return {
    scope: {
      isolatedBindingFoo: "=",
      isolatedAttributeFoo: "@",
      isolatedExpressionFoo: '&'
    },
    template: '<h2>Isolated Binding</h2><div>{{isolatedBindingFoo}}</div><input ng-model="isolatedBindingFoo"></input><br><h2>Isolated Attribute</h2><div>{{isolatedAttributeFoo}}</div><input ng-model="isolatedAttributeFoo"></input><h2>Isolated Expression</h2><input ng-model="isolatedFoo"></input><button class="btn" ng-click="isolatedExpressionFoo({newFoo:isolatedFoo})">Submit</button>'
  }
})

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>AngularJS Video Embed</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.2.4" src="http://code.angularjs.org/1.2.3/angular.js" data-require="angular.js@1.2.x"></script>
  <script src="app.js"></script>
</head>

<body>
  <div ng-app="drinkApp">
    <div ng-controller="AppCtrl as drinkCtrl">
      <h2>AppCtrl Scope</h2>
      {{drinkCtrl.ctrlFlavor.data}}

      <br>
      <input type="text" ng-model="drinkCtrl.ctrlFlavor.data">
      <div drink isolated-binding-foo="drinkCtrl.ctrlFlavor.data" isolated-attribute-foo="{{drinkCtrl.ctrlFlavor.data}}" isolated-expression-foo="drinkCtrl.updateFoo(newFoo)">

      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

Angular＆＃34;控制器作为语法＆＃34;，传递变量，并隔离范围

1 个答案: