數據沒有創建指令

我的HTML看起來像這樣顯示：數據沒有創建指令

<body ng-app="customDirective"> 
<div ng-controller="anController"> 
Date format: <input ng-model="fooData"> <hr/> 
Current time is: <my-new-directive foo-Attr="{{fooData}}"></my-new-directive> 
</div> 
</body> 
</html>

我想如果scope屬性scope.fooData是改變了我創建標籤my-new-directive內更新數據。

所以我有一個作用域屬性稱爲fooData：

$scope.fooData = 'Hello World!:)';

和我創建一個指令：

(function(angular) { 
    'use strict'; 
angular.module('customDirective', []) 
    .controller('anController', ['$scope', function($scope) { 
    $scope.fooData = 'Hello World!:)'; 
    }]) 
    .directive('myNewDirective', [function() { 

    function link(scope, element, attrs) { 
     var format, 
      timeoutId; 

     function updateValue() { 
     element.text(format); 
     } 

     scope.$watch(scope.fooData, function(value) { 
     format = value; 
     updateValue(); 
     }); 
    } 

    return { 
     restrict: 'A', 
     link: link, 
     scope: { 
     fooAttr: '@' 
     } 
    }; 
    }]); 
    document.createElement('my-new-directive'); 
})(window.angular);

但如果我寫的輸入標籤裏面新的值，則沒有在發生我新指令。

任何幫助將不勝感激！我正在使用AngularJS 1.5.8。

來源

2017-01-09 StepUp

我看到幾個錯誤，指令過於複雜。基於以上所有評論頂部，這是錯誤的：

return { 
     restrict: 'A', 
     link: link, 
     scope: { 
     fooAttr: '@' 
     } 
    };

你限制指令時，作爲一個屬性加入到行動。然而，在您的示例代碼：

Current time is: <my-new-directive foo-Attr="{{fooData}}"></my-new-directive>

你使用它作爲一個元素。

改變你的指令是這樣的：

return { 
     restrict: 'AE', // allow it as element or attribute 
     link: link, 
     scope: { 
     fooAttr: '@' 
     } 
    };

或

return { 
     restrict: 'E', // only element 
     link: link, 
     scope: { 
     fooAttr: '@' 
     } 
    };

也刪除此：

document.createElement('my-new-directive');

看看這個codepen：http://codepen.io/anon/pen/QdjBZr 這應該幫助你。

來源

2017-01-09 19:52:32

非常感謝！你是我的英雄！非常感謝！ – StepUp

謝謝！它完美的作品！但你爲什麼認爲這個指令過於複雜？ – StepUp

幾次失誤

指令的名稱應該是cammelCase。
屬性應的foo-attr代替fooAttr
正如你已經@（單程約束力的），你應該使用foo-attr="{{fooData}}"

來源

2017-01-09 15:53:07

我已經使用了您的更正，但是如果我寫入''，則沒有任何更改。請在您的更正中查看我的更新代碼。「document.createElement（'my-new-directive'）;'？ – StepUp

變化

<div ng-anController="anController">

到

<div ng-controller="anController">

並嘗試更好地遵循命名convension，像app名稱不應該有directive後綴，directive名字也應該是camelcase作爲@pankajParkar提及。

來源

2017-01-09 15:53:21

請在您的更正中查看我的更新代碼。「document.createElement（'my-new-directive'）;'？ – StepUp

ng-anController="anController"，看起來應該是ng-controller="anController"。
你應該看scope.fooAttr而不是scope.fooData。

來源

2017-01-09 15:57:38

爲什麼要看'scope.fooAttr'而不是'scope.fooData'？ – StepUp

你可能已經看到Roy的codepen，在你的指令中，你不知道fooData，它是一個隔離範圍，你只能得到fooAttr，但是'fooAttr'是雙向綁定到'fooData'，所以你只能看'fooAttr'。 –

數據沒有創建指令

回答

相關問題